18Switch language to العربية

Native Select

Previous

Styled native select element for simple forms.

import { NativeSelectPreview } from "@/components/atom/native-select-preview"

export default function NativeSelectDemo() {
  return (
    <>
      <NativeSelectPreview />
    </>
  )
}

Installation

pnpm dlx shadcn@latest add @codebase/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.