Add labels and hint blocks to fields

.changeset/famous-foxes-joke.md

@@ -0,0 +1,6 @@
+---
+'@crowdstrike/ember-toucan-core': minor
+---
+
+- Added label and hint named blocks to all the Field components.
+- Removed Fieldset.

docs/components/checkbox-field/index.md

@@ -4,15 +4,71 @@ Provides an underlying checkbox element building on top of the Field component.
 
 ## Label
 
-Provide a string to `@label` to render the text into the `<label>` of the Field.
+Required.
+
+Use either the `@label` component argument or the `:label` named block.
+
+Provide a string to the `@label` component argument or content to the `:label` named block to render into the Label section.
+
+### @label
+
+```hbs template
+<Form::Fields::Checkbox
+  @label='Label here'
+  @name='options'
+  @value={{this.groupValue}}
+  @onChange={{this.updateValue}}
+/>
+```
+
+### :label
+
+```hbs template
+<Form::Fields::Checkbox
+  @name='options'
+  @value={{this.groupValue}}
+  @onChange={{this.updateValue}}
+>
+  <:label>Here is a label <IconButton><Tooltip /><IconButton></:label>
+</Form::Fields::Checkbox>
+```
 
 ## Hint
 
-Optional. Provide a string to `@hint` to render the text into the Hint section of the Field.
+Optional.
+
+Use either the `@hint` component argument or the `:hint` named block.
+
+Provide a string to the `@hint` component argument or content to `:hint` named block to render into the Hint section.
+
+### @hint
+
+```hbs template
+<Form::Fields::Checkbox
+  @hint='Here is a hint'
+  @name='options'
+  @value={{this.groupValue}}
+  @onChange={{this.updateValue}}
+/>
+```
+
+### :hint
+
+```hbs template
+<Form::Fields::Checkbox
+  @name='options'
+  @value={{this.groupValue}}
+  @onChange={{this.updateValue}}
+>
+  <:hint>Here is a hint <Link to='somewhere'>Link</Link></:hint>
+</Form::Fields::Checkbox>
+```
 
 ## Error
 
-Optional. Provide a string or array of strings to `@error` to render the text into the Error section of the Field.
+Optional.
+
+Provide a string or array of strings to `@error` to render the text into the Error section of the Field.
 
 ```hbs
 <Form::Fields::Checkbox @label='Single error' @error='Error' />
@@ -139,6 +195,16 @@ Target the error block via `data-error`.
   />
 </div>
 
+### CheckboxField with label and hint blocks
+
+<div class='mb-4 w-64'>
+  <Form::Fields::Checkbox
+  >
+    <:label>Label <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
+    <:hint>Select <a href="https://www.crowdstrike.com/">link</a></:hint>
+  </Form::Fields::Checkbox>
+</div>
+
 ### CheckboxField with label and isDisabled
 
 <div class='mb-4 w-64'>

docs/components/checkbox-group-field/index.md

@@ -8,11 +8,73 @@ Provides a checkbox group to be used within forms. It yields [CheckboxFields](./
 
 ## Label
 
-Provide a string to `@label` to render the text into the `<legend>` of the fieldset.
+Required.
+
+Use either the `@label` component argument or the `:label` named block.
+
+Provide a string to the `@label` component argument or content to the `:label` named block to render into the legend of the fieldset.
+
+### @label
+
+```hbs template
+<Form::Fields::CheckboxGroup
+  @label='Label here'
+  @name='options'
+  @value={{this.groupValue}}
+  @onChange={{this.updateValue}}
+/>
+```
+
+### :label
+
+```hbs template
+<Form::Fields::CheckboxGroup
+  @name='options'
+  @value={{this.groupValue}}
+  @onChange={{this.updateValue}}
+>
+  {{!-- default block is required here when using :label --}}
+  <:default as |group|>
+    {{!-- render checkboxes here --}}
+  </:default>
+  <:label>Here is a label <IconButton><Tooltip /><IconButton></:label>
+</Form::Fields::CheckboxGroup>
+```
 
 ## Hint
 
-Optional. Provide a string to `@hint` to render the text into the Hint section of the fieldset.
+Optional.
+
+Use either the `@hint` component argument or the `:hint` named block.
+
+Provide a string to the `@hint` component argument or content to `:hint` named block to render into the Hint section.
+
+### @hint
+
+```hbs template
+<Form::Fields::CheckboxGroup
+  @hint='Here is a hint'
+  @name='options'
+  @value={{this.groupValue}}
+  @onChange={{this.updateValue}}
+/>
+```
+
+### :hint
+
+```hbs template
+<Form::Fields::CheckboxGroup
+  @name='options'
+  @value={{this.groupValue}}
+  @onChange={{this.updateValue}}
+>
+  {{! default block is required here when using :hint}}
+  <:default as |group|>
+    {{! render checkboxes here }}
+  </:default>
+  <:hint>Here is a hint <Link to='somewhere'>Link</Link></:hint>
+</Form::Fields::CheckboxGroup>
+```
 
 ## Error
 
@@ -126,6 +188,20 @@ Consumers have direct access to the underlying [checkbox element](https://develo
   </Form::Fields::CheckboxGroup>
 </div>
 
+### CheckboxGroupField with label block and hint block
+
+<div class='mb-4 w-64'>
+  <Form::Fields::CheckboxGroup @name='options-b'>
+    <:default as |group|>
+      <group.CheckboxField @label='Option 1' @value='option-1' />
+      <group.CheckboxField @label='Option 2' @value='option-2' />
+      <group.CheckboxField @label='Option 3' @value='option-3' />
+    </:default>
+    <:label>Label <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 11-6.364 2.636A8.972 8.972 0 0112 3zm0 4.7v5.2m0 3.39v.01" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></:label>
+    <:hint>Select an option <a href="https://www.crowdstrike.com/">link</a></:hint>
+  </Form::Fields::CheckboxGroup>
+</div>
+
 ### CheckboxGroupField with label and error
 
 <div class='mb-4 w-64'>