Fieldset
<gcds-fieldset>

Also called: form field.

A fieldset is a group of multiple form components or elements.

• GitHub
• Figma

Build a fieldset

Use a fieldset to group together related form elements or components and make these groups perceivable. Also use them for components with multiple options, like radios and checkboxes.

Coding and accessibility for fieldsets

Handle error messages and validation

• Use the required attribute to activate the required validator. Validation will happen by default on the onBlur event. A missing or invalid entry will prompt an inline error message with preset text.

• If you need to change the validation event, use the validate-on attribute. Validation can happen on blur, when the element loses focus, or manually with the validate() method.

• Use the required attribute for fields that must be filled in. This places "required" at the end of the label.

• Use the error-message attribute to include an error message text for all required inputs. Avoid using error messages for optional ones.

• For optional fields, avoid adding the error-message attribute.

• For an optional field that needs validation based on user input (like validating an email address format), opt to add custom validation with a custom error message.

Keep hint text static and perceivable

Maintain the default hint attribute to provide additional context so a person can provide a complete value and avoid an error state. This places hint text under the fieldset legend and above the grouping.

Support error message and hint text for radios and checkboxes

• The required and error-message attributes for the fieldset work best with a group of checkboxes or radio buttons.
• Maintain the fieldset's default hint text, validators, and error messages for radios and checkboxes.
• For radios and checkboxes, making the legend the question or instruction (like an input label) helps people using assistive technology to understand the options are all related to that question.

Validators

The fieldset will only validate checkbox and radio button children.

• Use the required attribute to activate the required validator. Validation will happen by default on the onBlur event.
• If you need to change the validation event, use the validate-on attribute. Validation can happen on blur, when the element loses focus, or manually with the validate method.

Get your code

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: The code builder uses English for all code elements, which follows standard practice.