# Native Select

> The browser's own select element, styled.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/native-select.json`

## Install

```tsx
import {
  NativeSelect,
  NativeSelectOption,
  NativeSelectOptGroup,
} from "@aspyn-io/kit";
```

### Native select

Renders the browser's own dropdown — ideal for long lists, mobile, and progressive enhancement. Group options with NativeSelectOptGroup.

```tsx
<Label htmlFor="fruit">Fruit</Label>
<NativeSelect id="fruit" defaultValue="apple">
  <NativeSelectOption value="">Select a fruit…</NativeSelectOption>
  <NativeSelectOptGroup label="Berries">
    <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
    <NativeSelectOption value="strawberry" disabled>Strawberry</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>
```

### Sizes

A compact sm variant matches dense toolbars and filters.

```tsx
<NativeSelect size="sm" aria-label="Small">…</NativeSelect>
<NativeSelect aria-label="Default">…</NativeSelect>
```

## Notes

- Use NativeSelect over Select when you want the OS-native dropdown: long option lists, mobile ergonomics, or forms that must work without JavaScript. Reach for Select (Radix listbox) when you need rich item content, search, or custom styling of the open list.
- Label it yourself via <Label htmlFor> or aria-label — like a raw <select>, it takes no name from its options. Pass aria-invalid to surface the destructive state.
- Options carry Canvas system colors so the open dropdown popup follows the OS light/dark appearance, which CSS can't fully control.