Fieldset

Fieldset is a component to aid in creating form components that require an underlying <fieldset> and <legend>. It is similar to Field, in that it provides an opinionated shell for building other components such as checkbox groups and radio groups.

Label

Provide a string to @label to render the text into the <legend> of the Fieldset. This is required.

<Form::Fieldset @label='Label' />

Hint

Optional. Provide a string to @hint to render the text into the Hint section of the Fieldset.

<Form::Fieldset @label='Label' @hint='Hint' />

Error

Optional. Provide a string or array of strings to @error to render the text into the Error section of the Fieldset.

<Form::Fieldset @label='Label' @error='Error' />

<Form::Fieldset @label='Label' @error={{(array 'Error 1' 'Error 2')}} />

Disabled State

Set the @isDisabled argument to disable the fieldset. When disabled, all form controls that are descendants of the fieldset, are disabled, meaning they are not editable and won't be submitted along with the form. Learn more via the fieldset documentation.

<Form::Fieldset @label='Label' @isDisabled={{true}}>
  <!-- This is now disabled as well -->
  <input />
</Form::Fieldset>

Attributes and Modifiers

Consumers have direct access to the underlying fieldset element, so all attributes are supported.

<Form::Fieldset @label='Label' name='my-checkboxes' data-fieldset />

Test Selectors

Root Element

The wrapping element is a <fieldset> and attributes are spread directly on it as mentioned above. Due to that, one can target the fieldset with any data attribute.

<Form::Fieldset @label='Label' data-fieldset />

Label

Target the label element via data-label.

Hint

Target the hint block via data-hint.

Wrapping Content Container

The yield is wrapped in a div container that can be targeted with data-control.