Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.
We’re hiring for design systems team! View open positions.

Select draft

Select lets user choose one option from an options menu. Consider using select when you have 6 or more options.

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
<nord-select name="page-size" value="25" label="Number of items per page:">
<option value="25">25 per page</option>
<option value="50">50 per page</option>
<option value="100">100 per page</option>
</nord-select>

Properties

PropertyAttributeDescriptionTypeDefault
hideLabelhide-labelVisually hide the label, but still show it to assistive technologies like screen readers.booleanfalse
placeholderplaceholderHint text to display as the first option of the select element.string | undefinedundefined
expandexpandControls whether the select expands to fill the width of its container.booleanfalse
labellabelLabel for the input.string""
requiredrequiredDetermines whether the input is required or not. An input 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
disableddisabledMakes the input component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.booleanfalse
namenameThe name of the input component.string | undefinedundefined
valuevalueThe value of the input component.string | undefinedundefined

Events

EventDescriptionType
changeFired whenever the input's value is changed via user interaction.NordEvent

Methods

focus(options?: FocusOptions) => void

Programmatically move focus to the component

options
An object which controls aspects of the focusing process.

blur() => void

Programmatically remove focus from the component.

click() => void

Programmatically simulates a click on the component.

Slots

Slot nameDescription
Default slotDefault slot for holding <option> elements.
labelUse when a label requires more than plain text.