Native Select

Native select component styled to match the design system. Uses the native select element for maximum compatibility and accessibility.

1. Import

Import the native select components from the design system.

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

2. Props

NativeSelect component props.

Prop	Type	Default
size	"sm" \| "default"	"default"
className	string	--
disabled	boolean	false

3. Usages

Common native select patterns and configurations.

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

export function Example() {
  return (
    <NativeSelect>
      <NativeSelectOption value="">Select a fruit</NativeSelectOption>
      <NativeSelectOption value="apple">Apple</NativeSelectOption>
      <NativeSelectOption value="banana">Banana</NativeSelectOption>
      <NativeSelectOption value="orange">Orange</NativeSelectOption>
      <NativeSelectOption value="grape">Grape</NativeSelectOption>
    </NativeSelect>
  );
}