Select

Selects one value from a list of options.

Select web component

Selects one value from a list of options.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Default

Select a country from structured options.

<noora-select label="Country" name="country">
  <option value="es">Spain</option>
  <option value="de">Germany</option>
  <option value="fr">France</option>
</noora-select>

Selected value

Show the current value in the trigger.

<noora-select label="Country" name="country" value="de">
  <option value="es">Spain</option>
  <option value="de">Germany</option>
  <option value="fr">France</option>
</noora-select>

Option icons

Add visual context to options and the selected trigger.

<noora-select label="Workspace" name="workspace" value="application">
  <option value="application" data-icon="category">Application</option>
  <option value="framework" data-icon="category">Framework</option>
  <option value="package" data-icon="category">Package</option>
</noora-select>

Hint

Explain how the selected value will be used.

<noora-select label="Country" name="country" hint="Used for regional settings.">
  <option value="es">Spain</option>
  <option value="de">Germany</option>
  <option value="fr">France</option>
</noora-select>

Disabled

Disable selection when the field is unavailable.

<noora-select label="Country" name="country" value="de" disabled>
  <option value="es">Spain</option>
  <option value="de">Germany</option>
  <option value="fr">France</option>
</noora-select>

Attributes

Attribute	Type or allowed values	Default	Description
`label`	string	`""`	Sets the placeholder label.
`name`	string	`""`	Sets the submitted field name.
`value`	string	`""`	Gets or sets the selected value.
`hint`	string	`None`	Adds supporting text.
`disabled`	boolean	`false`	Disables the select.
`required`	boolean	`false`	Marks the field as required.
`open`	boolean	`false`	Controls whether the options menu is open.

Properties

Property	Type or allowed values	Default	Description
`options`	json	`[]`	Defines options programmatically when declarative option children are not used. Each option can include label, value, icon, and disabled fields.

Events

Event	Type	Description
`input`	`InputEvent`	Emitted while the selected value changes.
`change`	`Event`	Emitted after the selected value changes.
`noora-open-change`	`CustomEvent<{ open: boolean }>`	Emitted when the options menu opens or closes.
`noora-select`	`CustomEvent<{ item: Record<string, unknown>; value: string }>`	Emitted with the selected option and value.

Slots

Name	Description
`default`	Declarative native option children.

Styling parts

Name	Description
`select`	The visible select trigger.
`content`	The options menu.
`items`	The options list.
`hint`	The supporting text.

Behavior

The component emits standard input and change events.

Use data-icon on a declarative option to show an icon in the menu and selected trigger.