Fieldset is used to group together several related form components and a label. The usage of this component helps to make these groups accessible for assistive technologies.
Fieldset consists of a mandatory label, and optionally a caption, tooltip, and error. It can be used to group together buttons, form fields, checkboxes, and similar components.
<duet-fieldset label="Choose an option">
<duet-checkbox checked label="Option 1"></duet-checkbox>
<duet-checkbox label="Option 2"></duet-checkbox>
<duet-checkbox label="Option 3"></duet-checkbox>
| || ||Additional caption to show next to the label.|| || |
| || ||An error message to be shown next to the label.|| || |
| || ||Label/legend displayed for the fieldset.|| || |
| || ||Visually hide the label, but still show it to screen readers.|| || |
| || ||Controls the margin of the component.|| || |
| || ||Theme of the fieldset.|| || |
| ||Use to place a tooltip alongside the fieldset label.|
| ||The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.|
This section includes guidelines for designers and developers about the usage of this component in different contexts.
When to use #
- When grouping several form controls as well as labels within a form.
- When grouping several button components together.
- When grouping several checkbox components together.
- When grouping multiple checkbox type choices together.
- When creating a date range picker.
When not to use #
- When using radio type choices which allow the selection of only one choice. Use choice-group instead.
- When using radio components. Use radio-group instead.
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.
- FIeldset component makes automatically sure we use
<legend>correctly and convey this information to assistive technologies.
labelproperty is always required for accessible choice fieldset. Label is added inside a
<legend>element that describes the
Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:
Using CLI ToolsTutorials
Creating Custom PatternsTutorials
Server Side RenderingTutorials
Usage With Markdown
If you experience any issues while using a component, please head over to the Support page for more guidelines and help.