SelectReady

Select lets users choose one option from an options menu. Consider using select when you have 5 or more options to choose from.

Open in new window

View RTL

<nord-select name="page-size" value="25" label="Label">
  <option value="25">25 per page</option>
  <option value="50">50 per page</option>
  <option value="100">100 per page</option>
</nord-select>

<nord-select name="title" value="25" autocomplete="honorific-prefix" label="Title" placeholder="Please select">
  <option value="mr">Mr</option>
  <option value="miss">Miss</option>
  <option value="ms">Ms.</option>
  <option value="mrs">Mrs.</option>
  <option value="dr">Dr.</option>
</nord-select>

<nord-select name="page-size" value="25" label="Label">
  <option value="25">25 per page</option>
  <option value="50">50 per page</option>
  <option value="100">100 per page</option>
</nord-select>

<style>
  nord-select {
    --n-button-background-color: var(--n-color-active);
    --n-button-gradient: none;
    --n-button-box-shadow: none;
  }
</style>

<nord-select name="page-size" value="25" label="Label">
  <nord-icon slot="icon" name="interface-filter"></nord-icon>
  <option value="25">25 per page</option>
  <option value="50">50 per page</option>
  <option value="100">100 per page</option>
</nord-select>

<nord-stack>
  <nord-select style="--n-select-inline-size: 150px" label="Size (150px)">
    <option value="25">25 per page</option>
    <option value="50">50 per page</option>
    <option value="100">100 per page</option>
  </nord-select>
  <nord-select style="--n-select-inline-size: 300px" label="Size (300px)">
    <option value="25">25 per page</option>
    <option value="50">50 per page</option>
    <option value="100">100 per page</option>
  </nord-select>
  <nord-select label="Size (default, fits content)" value="Default">
    <option value="25">25 per page</option>
    <option value="50">50 per page</option>
    <option value="100">100 per page</option>
  </nord-select>
  <nord-select label="Size (expand to fill the available width)" expand>
    <option value="25">25 per page</option>
    <option value="50">50 per page</option>
    <option value="100">100 per page</option>
  </nord-select>
</nord-stack>

<nord-select name="page-size" value="25" disabled label="Label">
  <option value="25">25 per page</option>
  <option value="50">50 per page</option>
  <option value="100">100 per page</option>
</nord-select>

<nord-select value="25" label="Label" expand>
  <option value="25">25 per page</option>
  <option value="50">50 per page</option>
  <option value="100">100 per page</option>
</nord-select>

<nord-select name="page-size" value="25" label="Label" hide-label>
  <option value="25">25 per page</option>
  <option value="50">50 per page</option>
  <option value="100">100 per page</option>
</nord-select>

<nord-select name="name" required value="25" label="Required">
  <option value="25">25 per page</option>
  <option value="50">50 per page</option>
  <option value="100">100 per page</option>
</nord-select>

<nord-stack>
  <nord-select size="s" name="page-size-1" value="25" label="Choose">
    <option value="25">25 per page</option>
    <option value="50">50 per page</option>
    <option value="100">100 per page</option>
  </nord-select>
  <nord-select size="m" name="page-size-2" value="25" label="Choose">
    <option value="25">25 per page</option>
    <option value="50">50 per page</option>
    <option value="100">100 per page</option>
  </nord-select>
  <nord-select size="l" name="page-size-3" value="25" label="Choose">
    <option value="25">25 per page</option>
    <option value="50">50 per page</option>
    <option value="100">100 per page</option>
  </nord-select>
</nord-stack>

<nord-select name="page-size" value="25" label="Label">
  <div slot="hint">
    Hint is an accessible way to provide <strong>additional information</strong> that might help the user
  </div>
  <option value="25">25 per page</option>
  <option value="50">50 per page</option>
  <option value="100">100 per page</option>
</nord-select>

<nord-select name="page-size" value="25">
  <div slot="label">Number of items <span style="color: var(--n-color-accent)">per page</span></div>
  <option value="25">25 per page</option>
  <option value="50">50 per page</option>
  <option value="100">100 per page</option>
</nord-select>

<form>
  <nord-stack gap="s">
    <nord-select name="pet" label="Type of pet:">
      <option value="cat">Cat</option>
      <option value="dog">Dog</option>
    </nord-select>

    <nord-button variant="primary">Submit</nord-button>
  </nord-stack>
</form>

<nord-select
  name="page-size"
  value="25"
  label="Label"
  hint="Hint is an accessible way to provide additional information that might help the user"
>
  <option value="25">25 per page</option>
  <option value="50">50 per page</option>
  <option value="100">100 per page</option>
</nord-select>

<nord-select name="pet" label="Type of pet" placeholder="Please select">
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
</nord-select>

<nord-select name="pet" label="Type of pet" placeholder="Please select" error="This field is required">
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
</nord-select>

Properties

Property	Attribute	Description	Type	Default
`expand`	`expand`	Controls whether the select expands to fill the width of its container.	`boolean`	`false`
`size`	`size`	The size of the component.	`"s" \| "m" \| "l"`	`"m"`
`label`	`label`	Label for the input.	`string`	`""`
`hint`	`hint`	Optional hint text to be displayed with the input. Alternatively use the hint slot.	`string \| undefined`	`undefined`
`hideLabel`	`hide-label`	Visually hide the label, but still show it to assistive technologies like screen readers.	`boolean`	`false`
`placeholder`	`placeholder`	Placeholder text to display within the input.	`string \| undefined`	`undefined`
`error`	`error`	Optional error to be shown with the input. Alternatively use the error slot.	`string \| undefined`	`undefined`
`required`	`required`	Determines 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.	`boolean`	`false`
`hideRequired`	`hide-required`	Visually hide the required indicator, but still show required attribute to assistive technologies like screen readers.	`boolean`	`false`
`autocomplete`	`autocomplete`	Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.	`AutocompleteAttribute`	`"off"`
`disabled`	`disabled`	Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.	`boolean`	`false`
`name`	`name`	The name of the form component.	`string \| undefined`	`undefined`
`value`	`value`	The value of the form component.	`string`	`""`
`form`	`form`	Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form.	`HTMLFormElement \| null`	`undefined`

Events

Event	Description	Type
`input`	Fired as the user types into the input.	`NordEvent`
`change`	Fired whenever the input's value is changed via user interaction.	`NordEvent`

Slots

Slot name	Description
Default slot	Default slot for holding <option> elements.
`label`	Use when a label requires more than plain text.
`hint`	Use when a hint requires more than plain text.
`error`	Optional slot that holds error text for the input.
`icon`	Used to place an icon at the start of select.

Methods

Method name	Parameters	Description
`focus(options?: FocusOptions) => void`	`options`: An object which controls aspects of the focusing process.	Programmatically move focus to the component.
`blur() => void`	N/A	Programmatically remove focus from the component.
`click() => void`	N/A	Programmatically simulates a click on the component.

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-select-block-size`	Controls the block size, or height, of the select using our spacing tokens.	`var(--n-space-xl)`
`--n-select-inline-size`	Controls the inline size, or width, of the select.	`fit-content`
`--n-label-color`	Controls the text color of the label, using our color tokens.	`var(--n-color-text)`

Dependencies

This component is internally dependent on the following components:

Usage

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

Do

Use to let a user choose one option from an options menu.
Use when you have more than 6 options to choose from.
Use when you don’t know how many options there will be.
Use hint text and placeholder to provide additional, non-critical instructions.

Don’t

Don't use a select if you have less than 6 options to choose from. Consider using segmented control or radio components instead, if you have enough space to allow it.

Content guidelines

Select labels act as a title for the select field. Labels should typically be short and in noun form:

Company name

What is your company name?

When writing select labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

Company name

Company Name

Do not use colons in select labels:

Choose organization

Choose organization:

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.

SelectReady

Properties

Events

Slots

Methods

CSS Properties

Dependencies

Button

Icon

Usage

Do

Don’t

Content guidelines

Integration

Troubleshooting

Was this page helpful?

SelectReady

Properties

Events

Slots

Methods

CSS Properties

Dependencies

Button

Icon

Usage #

Do #

Don’t #

Content guidelines #

Integration

Troubleshooting

Was this page helpful?

Usage

Do

Don’t

Content guidelines