FieldsetReady

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.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-fieldset label="Fieldset label">
  <nord-stack>
    <nord-checkbox name="option" value="1" label="Option 1"></nord-checkbox>
    <nord-checkbox name="option" value="2" label="Option 2"></nord-checkbox>
  </nord-stack>
</nord-fieldset>

Properties

PropertyAttributeDescriptionTypeDefault
labellabel

Label for the fieldset. Rendered as a <legend> element.

string""
hinthint

Optional hint text to be displayed with the input. Alternatively use the hint slot.

string | undefinedundefined
errorerror

Optional error to be shown with the fieldset. Alternatively use the error slot.

string | undefinedundefined
requiredrequired

Determines whether the fieldset is required or not. A fieldset marked as required will be announced as such to users of assistive technology. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.

booleanfalse
hideRequiredhide-required

Visually hide the required indicator, but still show required attribute to assistive technologies like screen readers.

booleanfalse
hideLabelhide-label

Visually hide the label, but still show it to assistive technologies like screen readers.

booleanfalse
sizesize

The size of the label.

"s" | "m""m"

Slots

Slot nameDescription
label

Use when a label requires more than plain text.

hint

Optional slot that holds hint text for the fieldset.

error

Optional slot that holds error text for the fieldset.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-label-color

Controls the text color of the label, using our color tokens.

var(--n-color-text)

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do

  • 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

  • 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:

Pick a color
Choose

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):

Pick a color
Pick A Color

Avoid ending in punctuation if it’s a single sentence, word, or a fragment:

Pick a color
Pick a color.

Do not use colons in fieldset label:

Payment details
Payment details:

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.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

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.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.