Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/select.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# 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>
```