Native Select

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/native-select

Anatomy#

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

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#

States#

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.