Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Native Select
description: A styled native HTML select element with consistent design system integration.
---

```astro live props={{ name: 'native-select' }}
---
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
---

<NativeSelect class="w-full max-w-xs">
  <NativeSelectOption value="">Select status</NativeSelectOption>
  <NativeSelectOption value="todo">Todo</NativeSelectOption>
  <NativeSelectOption value="in-progress">In Progress</NativeSelectOption>
  <NativeSelectOption value="done">Done</NativeSelectOption>
  <NativeSelectOption value="cancelled">Cancelled</NativeSelectOption>
</NativeSelect>
```

## Installation

```bash
npx shadcn@latest add @fulldev/native-select
```

## Usage

```ts
import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/ui/native-select"
```

```astro
<NativeSelect>
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
  <NativeSelectOption value="grapes" disabled> Grapes </NativeSelectOption>
  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>
```

## Composition

Use options directly under `NativeSelect` for a simple list:

```text
NativeSelect
├── NativeSelectOption
├── NativeSelectOption
├── NativeSelectOption
└── NativeSelectOption
```

Use `NativeSelectOptGroup` to organize options into categories:

```text
NativeSelect
├── NativeSelectOptGroup
│   ├── NativeSelectOption
│   └── NativeSelectOption
└── NativeSelectOptGroup
    ├── NativeSelectOption
    └── NativeSelectOption
```

## Examples

### With Groups

Organize options using `NativeSelectOptGroup` for better categorization.

```astro live
---
import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/ui/native-select"
---

<NativeSelect class="w-full max-w-xs">
  <NativeSelectOption value="">Select department</NativeSelectOption>
  <NativeSelectOptGroup label="Engineering">
    <NativeSelectOption value="frontend">Frontend</NativeSelectOption>
    <NativeSelectOption value="backend">Backend</NativeSelectOption>
    <NativeSelectOption value="devops">DevOps</NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="Sales">
    <NativeSelectOption value="sales-rep">Sales Rep</NativeSelectOption>
    <NativeSelectOption value="account-manager">
      Account Manager
    </NativeSelectOption>
    <NativeSelectOption value="sales-director">
      Sales Director
    </NativeSelectOption>
  </NativeSelectOptGroup>
  <NativeSelectOptGroup label="Operations">
    <NativeSelectOption value="support">Customer Support</NativeSelectOption>
    <NativeSelectOption value="product-manager">
      Product Manager
    </NativeSelectOption>
    <NativeSelectOption value="ops-manager">
      Operations Manager
    </NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>
```

### Disabled State

Disable individual options or the entire select component.

```astro live
---
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
---

<NativeSelect disabled class="w-full max-w-xs">
  <NativeSelectOption value="">Select priority</NativeSelectOption>
  <NativeSelectOption value="low">Low</NativeSelectOption>
  <NativeSelectOption value="medium">Medium</NativeSelectOption>
  <NativeSelectOption value="high">High</NativeSelectOption>
  <NativeSelectOption value="critical">Critical</NativeSelectOption>
</NativeSelect>
```

### Invalid State

Show validation errors with the `aria-invalid` attribute and error styling.

```astro live
---
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
---

<NativeSelect aria-invalid="true" class="w-full max-w-xs">
  <NativeSelectOption value="">Select role</NativeSelectOption>
  <NativeSelectOption value="admin">Admin</NativeSelectOption>
  <NativeSelectOption value="editor">Editor</NativeSelectOption>
  <NativeSelectOption value="viewer">Viewer</NativeSelectOption>
  <NativeSelectOption value="guest">Guest</NativeSelectOption>
</NativeSelect>
```

## Accessibility

- The component maintains all native HTML select accessibility features.
- Screen readers can navigate through options using arrow keys.
- The chevron icon is marked as `aria-hidden="true"` to avoid duplication.
- Use `aria-label` or `aria-labelledby` for additional context when needed.

```astro
<NativeSelect aria-label="Choose your preferred language">
  <NativeSelectOption value="en">English</NativeSelectOption>
  <NativeSelectOption value="es">Spanish</NativeSelectOption>
  <NativeSelectOption value="fr">French</NativeSelectOption>
</NativeSelect>
```

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/native-select) for more information on props.