Fieldset is used for grouping sets of input components. It is necessary to use a fieldset with radio and checkbox components. It can also be useful for logically grouping other types of inputs.
<nord-fieldset label="Fieldset label">
<nord-checkbox name="option" value="1" label="Option 1"></nord-checkbox>
<nord-checkbox name="option" value="2" label="Option 2"></nord-checkbox>
Label for the fieldset.
Optional hint text to be displayed with the input. Alternatively use the hint slot.
Optional error to be shown with the fieldset. Alternatively use the error slot.
|Use when a label requires more than plain text.|
|Optional slot that holds hint text for the fieldset.|
|Optional slot that holds error text for the fieldset.|
This section includes guidelines for designers and developers about the usage of this component in different contexts.
- Use the fieldset component when you need to create a relationship between multiple form inputs.
- It is especially important to use with a group of radio components.
- Don’t place interactive content (buttons, links etc) inside the label.
- Don’t use with a checkbox component when there is only one checkbox. For example, when accepting terms and conditions.
Content guidelines #
Fieldset label should be clear, accurate and predictable. It should help the user to understand how the items in the fieldset are grouped together, or what kind of choice the user is making:
When writing fieldset labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid ending in punctuation if it’s a single sentence, word, or a fragment:
Do not use colons in fieldset label:
Additional considerations #
- A label (which becomes to
<legend>inside the fieldset) is always required.
- Hint text can be used to offer further information or explanation for an option.
Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.