# Option

> Source: https://design.nanatec.co.ke/components/option/
> A selectable option for listbox / select / dropdown usage. Bubbles `nana-select` with its `value` and reflects `selected` / `disabled`.

A selectable option for listbox / select / dropdown usage. Bubbles `nana-select` with its `value` and reflects `selected` / `disabled`.

## Preview

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

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/option";
```

## Basic usage

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

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-select` | `CustomEvent` | Fired on activation (`detail.value`) |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The label |
| `prefix` | Leading icon |
| `description` | Secondary text |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The option row |

## Related components

<ul class="related not-content">
  <li><a href="/components/button/">Button</a></li>
  <li><a href="/components/button-group/">Button Group</a></li>
  <li><a href="/components/icon-button/">Icon Button</a></li>
  <li><a href="/components/input/">Input</a></li>
  <li><a href="/components/textarea/">Textarea</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-option--docs