Native Select

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/native-select.json

Usage

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

<NativeSelect>
  <NativeSelectOptGroup label="Group 1">
    <NativeSelectOption value="1">Option 1</NativeSelectOption>
    <NativeSelectOption value="2">Option 2</NativeSelectOption>
    <NativeSelectOption value="3">Option 3</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>

Native Select vs Select

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

Sizes

Use the size prop to change the select height.

Small

Medium

Large

State

Controlled

Use value and onChange to control the select externally.

Disabled

Use the disabled prop to disable the select.

Invalid

Use the invalid prop to mark the select as invalid.

Examples

Groups

Use <NativeSelectOptGroup /> to group options with a label.

With Field

Wrap in <Field /> with <FieldLabel /> and <FieldDescription /> for proper labeling and accessibility.

API Reference

NativeSelect

Extends native <select> props. Additional props:

NativeSelectOptGroup

Extends native <optgroup> props. Use label for the group label.

NativeSelectOption

Extends native <option> props. Use value and children for option value and label.

For a complete list of props, see the Ark UI documentation.