# Select

> Source: https://design.nanatec.co.ke/components/select/
> A `<nana-select>` element.

A `<nana-select>` element.

## Preview

```html
<nana-select label="Country" style="min-width:16rem">
  <nana-option value="ke">Kenya</nana-option>
  <nana-option value="ug">Uganda</nana-option>
</nana-select>
```

## Installation

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

## Import

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

## Basic usage

```html
<nana-select label="Country" style="min-width:16rem">
  <nana-option value="ke">Kenya</nana-option>
  <nana-option value="ug">Uganda</nana-option>
</nana-select>
```

## Searchable

Add `searchable` to filter options; `clearable` adds a reset button.

```html
<nana-select label="Country" placeholder="Search…" searchable clearable style="min-width:16rem">
  <nana-option value="us">United States</nana-option>
  <nana-option value="ca">Canada</nana-option>
  <nana-option value="mx">Mexico</nana-option>
</nana-select>
```

## Multi-select

Set `multiple` — selected values render as removable chips.

```html
<nana-select label="Countries" placeholder="Select…" multiple clearable style="min-width:16rem">
  <nana-option value="us">United States</nana-option>
  <nana-option value="ca">Canada</nana-option>
  <nana-option value="mx">Mexico</nana-option>
</nana-select>
```

## API

## CSS Parts

| Part | Description |
|---|---|
| `trigger` | The trigger element |
| `panel` | The floating listbox panel |
| `chip` | A selected-value chip (multi-select only) |
| `search` | The search input |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## 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-select--docs