Components
NativeSelect
A styled native HTML select.
NativeSelect is a styled wrapper around the native HTML select element, preserving platform-specific behavior and accessibility.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/native-select.jsonUsage
import {
NativeSelect,
NativeSelectOption,
} from "@/components/ui/native-select";
export default function Example() {
return (
<NativeSelect>
<NativeSelectOption value="apple">Apple</NativeSelectOption>
<NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelect>
);
}Examples
Default
Small
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
NativeSelectdata-slot="native-select" | <select>HTML |
|
NativeSelectOptiondata-slot="native-select-option" | <option>HTML | — |
NativeSelectOptGroupdata-slot="native-select-optgroup" | <optgroup>HTML | — |
Changelog
Full NativeSelect historyLast updated on