GitHub

Native Select

A styled native select for simple, accessible option picking.

Loading
Loading...
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";
 
export function NativeSelectDemo() {
  return (
    <NativeSelect>
      <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

npx shadcn@latest add "https://ui.blode.co/r/styles/default/native-select"

Usage

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