Fieldset

Usage

The Fieldset component is used for grouping sets of related checkboxes or radio buttons.

Best practices

Do

Use the fieldset component to group a set of related inputs i.e. checkboxes or radio button.

Don't

Don’t use the fieldset with just one input.

Do

Provide a clear label to explain available choices to the user.

Don't

Don’t omit the label. Omitting the label makes context hard to understand.

Do

Use hint to provide additional information about the fieldset.

Don't

Don’t hide additional information behind icons or tooltips.

Do

Use error to show validation message for a fieldset.

Don't

Don’t show a validation message for each input.

Do

Consider using inline alignment when vertical space is limited and labels are short and clear.

Don't

Don’t use inline alignment when items include long labels and hints. This will make content harder to scan.

Examples

Live Preview

Props

Fetching props...