Select

Selects one value from a list of options.

html

<noora-select label="Country" name="country">
  <option value="es">Spain</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`	`Array<Record<string, unknown>>`	`[]`	Defines options programmatically when declarative option children are not used. Each option can include label, value, icon, and disabled fields.

Read-only properties

Property	Type	Description
`control`	`HTMLSelectElement \| null`	The native select control.
`form`	`HTMLFormElement \| null`	The associated form.

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

Slot	Description
`default`	Declarative native option children.

Styling parts

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

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.

Default

Select a country from structured options.

html

<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.

html

<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.

html

<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.

html

<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.

html

<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>