Native Select
A native select element styled to match Select.
Native Select wraps the platform <select> element, so the option list and its
keyboard behaviour come from the browser. It inherits its trigger surface, focus
ring, disabled treatment and sizing from Select.
It is an Authored component: shadcn/ui owns its structure and its design comes from the nearest Port, because coss/ui ships no native select.
Installation
npx shadcn@latest add @kosori/native-selectExample
native-select-example.tsx
import {
NativeSelect,
NativeSelectOptGroup,
NativeSelectOption,
} from '@/components/ui/native-select';
const NativeSelectExample = () => (
<NativeSelect
aria-label='Select framework'
className='w-48'
defaultValue='next'
>
<NativeSelectOptGroup label='Frameworks'>
<NativeSelectOption value='next'>Next.js</NativeSelectOption>
<NativeSelectOption value='vite'>Vite</NativeSelectOption>
<NativeSelectOption value='astro'>Astro</NativeSelectOption>
</NativeSelectOptGroup>
</NativeSelect>
);
export default NativeSelectExample;
Usage
import {
NativeSelect,
NativeSelectOption,
} from '@/components/ui/native-select';
const NativeSelectDemo = () => (
<NativeSelect aria-label='Select framework' defaultValue='next'>
<NativeSelectOption value='next'>Next.js</NativeSelectOption>
<NativeSelectOption value='vite'>Vite</NativeSelectOption>
</NativeSelect>
);Variants
| Part | Prop | Values |
|---|---|---|
NativeSelect | size | default, sm |