Fieldset Component

Usage

Deprecated: nord-fieldset is superseded by the composable Field Set + Field Legend parts of the Field family. Reach for those in new code and migrate existing usage when convenient.

Fieldset groups a set of related form controls under a legend, rendering a real <fieldset>/<legend> with an optional hint and error.

import "@nordhealth/components/lib/Fieldset"

Examples

Basic

Group a set of related controls under a label.

Hidden label

Use hide-label to keep the legend available to assistive technology while hiding it visually.

Small size

Set size="s" for a more compact group.

With a hint

Add a hint to give the group helper text below the legend.

With an error

Set error to show a validation message for the whole group.

Migrating to Field Set

Compose Field Set, Field Legend and Field Group instead:

<nord-field-set>
  <nord-field-legend>Profile</nord-field-legend>
  <nord-field-description>Visible to colleagues across your clinic.</nord-field-description>
  <nord-field-group>
    <nord-field>
      <nord-field-label for="name">Full name</nord-field-label>
      <nord-input id="name" hide-label placeholder="Laura Williams"></nord-input>
    </nord-field>
  </nord-field-group>
</nord-field-set>

See the Field documentation for the full composition.

Accessibility

Fieldset renders a native <fieldset>/<legend>, which groups related controls for assistive technology.
The newer Field Set achieves the same grouping with role="group" named by its Field Legend, and composes with the rest of the Field family.

API reference

Fieldset

Deprecated: for new code, group related controls with the composable Field family — see grouping fields with Field. nord-fieldset remains supported for backwards compatibility and is not scheduled for removal. Fieldset is used for grouping sets of input components. It is necessary to use a fieldset with radio and checkbox components, and can also be useful for logically grouping other types of inputs.

<nord-accordion></nord-accordion>

Props

Property	Attribute	Description	Type	Default
`label`	`label`	Label for the fieldset. Rendered as a `<legend>` element.	`string`	`''`
`hint`	`hint`	Optional hint text to be displayed with the input. Alternatively use the hint slot.	`string \| undefined`	—
`hintBelow`	`hint-below`	Renders the hint below the grouped controls and any error instead of below the legend.	`boolean`	`false`
`error`	`error`	Optional error to be shown with the fieldset. Alternatively use the error slot.	`string \| undefined`	—
`required`	`required`	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.	`boolean`	`false`
`hideRequired`	`hide-required`	Visually hide the required indicator, but still show required attribute to assistive technologies like screen readers.	`boolean`	`false`
`hideLabel`	`hide-label`	Visually hide the label, but still show it to assistive technologies like screen readers.	`boolean`	`false`
`size`	`size`	The size of the label.	`'s' \| 'm'`	`'m'`

Slots

Slot name	Description
`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.

Property	Description	Default
`--n-label-color`	Controls the text color of the label, using our color tokens.	`var(--n-color-text)`

Design guidelinesFor designers

Deprecated. For new code, group related controls with the composable Field family — see grouping fields with Field. nord-fieldset keeps working for backwards compatibility and is not scheduled for removal — there's no need to rush a migration.

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.

Hint placement

Hint text is rendered above the grouped controls by default to preserve existing behavior for current consumers. Use the hint-below property to opt in to rendering the hint below the grouped controls and any error.

This is a non-breaking rollout for teams adopting the new layout gradually. Existing integrations keep the current placement unless hint-below is explicitly set.

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.