Option
A selectable option for listbox / select / dropdown usage. Bubbles nana-select with its value and reflects selected / disabled.
Preview
Section titled “Preview”<nana-select label="Choose one" style="min-width:16rem">
<nana-option value="1">Option one</nana-option>
<nana-option value="2">Option two</nana-option>
</nana-select>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/option";Basic usage
Section titled “Basic usage”<nana-select label="Choose one" style="min-width:16rem"> <nana-option value="1">Option one</nana-option> <nana-option value="2">Option two</nana-option></nana-select>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
active | — | boolean | false | Active (keyboard-highlighted) state — used by listbox parents like nana-combobox |
description | — | string | undefined | — | Secondary descriptive text |
disabled | — | boolean | false | Disable the option |
selected | — | boolean | false | Selected state |
value | — | string | '' | Value emitted on selection |
Events
| Event | Description |
|---|---|
nana-select | Fired on activation (`detail.value`) |
Slots
| Slot | Description |
|---|---|
(default) | The label |
prefix | Leading icon |
description | Secondary text |
CSS parts
| Part | Description |
|---|---|
::part(base) | The option row |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-select | CustomEvent | Fired on activation (detail.value) |
| Slot | Description |
|---|---|
(default) | The label |
prefix | Leading icon |
description | Secondary text |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
base | The option row |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Option interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook