14
Switch language to العربية

Native Select

Previous

Styled native select element for simple forms.

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

export function NativeSelectPreview() {
  return (
    <NativeSelect className="w-56">
      <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

pnpm dlx codebase add native-select

Usage

import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select"
<NativeSelect>
  <NativeSelectOption value="">Select status</NativeSelectOption>
  <NativeSelectOption value="todo">Todo</NativeSelectOption>
  <NativeSelectOption value="done">Done</NativeSelectOption>
</NativeSelect>

Use the native select when a plain platform control is enough — it needs no JavaScript, works inside forms out of the box, and inherits RTL behavior from the browser. Reach for the composed Select when you need custom item rendering or grouped commands.