Native Select

A styled native HTML select element with consistent design system integration.

For a styled select component, see the Select component.

1
import { NativeSelect, NativeSelectOption } from "~/components/ui/native-select";
2

3
export default function NativeSelectDemo() {
4
  return (
5
    <NativeSelect>
6
      <NativeSelectOption value="">Select status</NativeSelectOption>
7
      <NativeSelectOption value="todo">Todo</NativeSelectOption>
8
      <NativeSelectOption value="in-progress">In Progress</NativeSelectOption>
9
      <NativeSelectOption value="done">Done</NativeSelectOption>
10
      <NativeSelectOption value="cancelled">Cancelled</NativeSelectOption>
11
    </NativeSelect>
12
  );
13
}

Installation

pnpm dlx shadcn@latest add @zaidan/native-select
npx shadcn@latest add @zaidan/native-select
yarn dlx shadcn@latest add @zaidan/native-select
bunx --bun shadcn@latest add @zaidan/native-select

Usage

1
import {
2
  NativeSelect,
3
  NativeSelectOptGroup,
4
  NativeSelectOption,
5
} from "~/components/ui/native-select";

1
<NativeSelect>
2
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
3
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
4
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
5
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
6
  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
7
</NativeSelect>

Composition

Simple

Options placed directly under NativeSelect (no NativeSelectOptGroup).

NativeSelect
├── NativeSelectOption
├── NativeSelectOption
├── NativeSelectOption
└── NativeSelectOption

With groups

Use NativeSelectOptGroup to organize options into categories.

NativeSelect
├── NativeSelectOptGroup
│   ├── NativeSelectOption
│   └── NativeSelectOption
└── NativeSelectOptGroup
    ├── NativeSelectOption
    └── NativeSelectOption

Groups

Use NativeSelectOptGroup to organize options into categories.

1
import {
2
  NativeSelect,
3
  NativeSelectOptGroup,
4
  NativeSelectOption,
5
} from "~/components/ui/native-select";
6

7
export default function NativeSelectGroups() {
8
  return (
9
    <NativeSelect>
10
      <NativeSelectOption value="">Select department</NativeSelectOption>
11
      <NativeSelectOptGroup label="Engineering">
12
        <NativeSelectOption value="frontend">Frontend</NativeSelectOption>
13
        <NativeSelectOption value="backend">Backend</NativeSelectOption>
14
        <NativeSelectOption value="devops">DevOps</NativeSelectOption>
15
      </NativeSelectOptGroup>
16
      <NativeSelectOptGroup label="Sales">
17
        <NativeSelectOption value="sales-rep">Sales Rep</NativeSelectOption>
18
        <NativeSelectOption value="account-manager">Account Manager</NativeSelectOption>
19
        <NativeSelectOption value="sales-director">Sales Director</NativeSelectOption>
20
      </NativeSelectOptGroup>
21
      <NativeSelectOptGroup label="Operations">
22
        <NativeSelectOption value="support">Customer Support</NativeSelectOption>
23
        <NativeSelectOption value="product-manager">Product Manager</NativeSelectOption>
24
        <NativeSelectOption value="ops-manager">Operations Manager</NativeSelectOption>
25
      </NativeSelectOptGroup>
26
    </NativeSelect>
27
  );
28
}

Sizes

Use the size prop to switch between the default and small select sizes.

1
import { NativeSelect, NativeSelectOption } from "~/components/ui/native-select";
2

3
export default function NativeSelectSizes() {
4
  return (
5
    <div class="flex flex-col gap-4">
6
      <NativeSelect size="sm">
7
        <NativeSelectOption value="">Select a fruit</NativeSelectOption>
8
        <NativeSelectOption value="apple">Apple</NativeSelectOption>
9
        <NativeSelectOption value="banana">Banana</NativeSelectOption>
10
        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
11
      </NativeSelect>
12
      <NativeSelect size="default">
13
        <NativeSelectOption value="">Select a fruit</NativeSelectOption>
14
        <NativeSelectOption value="apple">Apple</NativeSelectOption>
15
        <NativeSelectOption value="banana">Banana</NativeSelectOption>
16
        <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
17
      </NativeSelect>
18
    </div>
19
  );
20
}

With Field

Use with the Field component for proper form labeling and descriptions.

1
import { Field, FieldDescription, FieldLabel } from "~/components/ui/field";
2
import { NativeSelect, NativeSelectOption } from "~/components/ui/native-select";
3

4
export default function NativeSelectField() {
5
  return (
6
    <Field>
7
      <FieldLabel for="native-select-country">Country</FieldLabel>
8
      <NativeSelect id="native-select-country">
9
        <NativeSelectOption value="">Select a country</NativeSelectOption>
10
        <NativeSelectOption value="us">United States</NativeSelectOption>
11
        <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
12
        <NativeSelectOption value="ca">Canada</NativeSelectOption>
13
        <NativeSelectOption value="au">Australia</NativeSelectOption>
14
      </NativeSelect>
15
      <FieldDescription>Select your country of residence.</FieldDescription>
16
    </Field>
17
  );
18
}

Disabled

Add the disabled prop to the NativeSelect component to disable the select.

1
import { NativeSelect, NativeSelectOption } from "~/components/ui/native-select";
2

3
export default function NativeSelectDisabled() {
4
  return (
5
    <NativeSelect disabled>
6
      <NativeSelectOption value="">Disabled</NativeSelectOption>
7
      <NativeSelectOption value="apple">Apple</NativeSelectOption>
8
      <NativeSelectOption value="banana">Banana</NativeSelectOption>
9
      <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
10
    </NativeSelect>
11
  );
12
}

Invalid

Use aria-invalid to show validation errors and the data-invalid attribute to the Field component for styling.

1
import { NativeSelect, NativeSelectOption } from "~/components/ui/native-select";
2

3
export default function NativeSelectInvalid() {
4
  return (
5
    <NativeSelect aria-invalid="true">
6
      <NativeSelectOption value="">Error state</NativeSelectOption>
7
      <NativeSelectOption value="apple">Apple</NativeSelectOption>
8
      <NativeSelectOption value="banana">Banana</NativeSelectOption>
9
      <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
10
    </NativeSelect>
11
  );
12
}

Native Select vs Select

Use NativeSelect for native browser behavior, better performance, or mobile-optimized dropdowns.
Use Select for custom styling, animations, or complex interactions.

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.

1
<NativeSelect aria-label="Choose your preferred language">
2
  <NativeSelectOption value="en">English</NativeSelectOption>
3
  <NativeSelectOption value="es">Spanish</NativeSelectOption>
4
  <NativeSelectOption value="fr">French</NativeSelectOption>
5
</NativeSelect>

API Reference

NativeSelect

The main select component that wraps the native HTML select element.

Prop	Type	Default
`size`	`"sm" \| "default"`	`"default"`
`class`	`string`	-
`defaultValue`	`string`	-

<NativeSelect>
  <NativeSelectOption value="option1">Option 1</NativeSelectOption>
  <NativeSelectOption value="option2">Option 2</NativeSelectOption>
</NativeSelect>

NativeSelectOption

Represents an individual option within the select.

Prop	Type	Default
`value`	`string`	-
`disabled`	`boolean`	`false`

NativeSelectOptGroup

Groups related options together for better organization.

Prop	Type	Default
`label`	`string`	-
`disabled`	`boolean`	`false`

<NativeSelectOptGroup label="Fruits">
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelectOptGroup>