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>
| || ||The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive" makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message unread by screen readers.|| || |
| || ||Additional caption to show next to the label.|| || |
| || ||An error message to be shown next to the label.|| || |
| || ||Label/legend displayed for the fieldset.|| || |
| || ||Heading level for the label in the legend element. This is only used to give screen readers better logical structure. This does not affect visual appearance.|| || |
| || ||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 not to use #
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.