Select Updated

Usage

Select lets users choose a single option from a menu. Consider using it when you have five or more options to choose from. Place <option> elements in the default slot, and use value to set the initial selection. For a small number of mutually exclusive options, consider Radio buttons instead.

The select renders its built-in label, hint and error on its own. Wrapped in a Field, the Field takes over with a Field Label, Field Description and Field Error, and the built-in versions step aside automatically.

import "@nordhealth/components/lib/Select"
import "@nordhealth/components/lib/Field"
import "@nordhealth/components/lib/FieldLabel"
import "@nordhealth/components/lib/FieldDescription"

Standalone or inside a Field

Use the control on its own with its built-in label, hint and error, or wrap it in a Field — the Field then provides the labelling. Both render the same control:

Examples

Basic

A select with a connected Field Label and a list of <option> choices.

Autocomplete

Set autocomplete to let the browser suggest and fill a previously entered value.

Sizes

Use the size attribute to render a small, medium (default) or large select.

Hint

Add a Field Hint to give the user extra guidance about the field.

Required

Set required on the Field Label to show the required indicator and mark the control required.

Hidden label

To hide the label visually while keeping it available to assistive technology, connect a Field Label with for and visually hide it.

Custom width

Constrain or expand the select by setting a custom width on the control.

Custom button style

Customise the trigger appearance with CSS custom properties or parts.

Custom icon

Replace the default chevron with a custom icon via the icon slot.

In a form

Use the select inside a <form> to submit its value alongside other fields.

Placeholder

Use placeholder to prompt the user to make a choice before any option is selected. It is not a replacement for a Field Label.

Error

Show validation with a Field Error and mark the Field invalid.

Disabled

A disabled select cannot be focused or changed and is excluded from form submission.

Expand

Use expand to make the select fill the width of its container.

RTL

Select follows the document or container direction. Toggle the direction to see the layout mirror.

Accessibility

• Always give the select an accessible name with a Field Label connected via for.
• Convey validation with a Field Error rather than colour alone — it is associated with the select and announced to assistive technology.
• Mark required fields by setting required on the Field Label; it shows the indicator and marks the control required.
• Give every <option> clear, descriptive text, and use a placeholder rather than an empty option to prompt for a choice.
• For a small number of mutually exclusive options, consider Radio buttons instead, which expose all choices at once.