# Shadcn Native Select

> Open-source shadcn native select components for lightweight selects, mobile-friendly forms, and basic option picking.

- Type: shadcn/ui component, free
- Page: https://web.dev.reui.io/components/native-select
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/native-select.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/native-select.md
- MCP: `get_component("native-select")`, then `get_examples("native-select")`
- Examples: 6

## When to use

- Form fields that pick one value from a short fixed list through the browser's own picker
- Option lists sorted under group headings, with single options shown but locked
- Fields at a smaller height, under a label and hint, or shown disabled or invalid

## When not to use

- Option rows that carry icons, avatars, badges or descriptions in the open list: use [Select](https://web.dev.reui.io/components/select.md) (`get_component("select")`)
- A long list the user narrows by typing before picking one: use [Combobox](https://web.dev.reui.io/components/combobox.md) (`get_component("combobox")`)
- Choices nested more than one level deep, such as region, then country, then city: use [Cascader](https://web.dev.reui.io/components/cascader.md) (`get_component("cascader")`)

## Agent notes

- `className` on `NativeSelect` lands on its wrapper `div`; every other prop, such as `id`, `disabled` or `aria-invalid`, goes to the inner `select`
- The first option's text never names the control; tie a `FieldLabel` to the `NativeSelect` `id` as `c-native-select-4` does, or pass an aria-label
- No example passes a name to `NativeSelect`, so a native form submit leaves the choice out; add one inside your form

## Examples

- [Basic](https://web.dev.reui.io/components/native-select/c-native-select-1.md): Basic native select.. Best for a flat list of 5 fruits behind an empty prompt option, with Grapes listed but disabled.
- [Grouped Options](https://web.dev.reui.io/components/native-select/c-native-select-2.md): Native select with options grouped.. Best for fruits and vegetables under 2 group headings, 3 choices in each, below an ungrouped prompt.
- [Small](https://web.dev.reui.io/components/native-select/c-native-select-3.md): Small native select.. Best for the sm size, 4px shorter than the default in every style, on a 2 option list.
- [Field With Label](https://web.dev.reui.io/components/native-select/c-native-select-4.md): Native select embedded within a field.. Best for a Country label tied to the control by id, a hint line under it and 3 countries to pick.
- [Disabled](https://web.dev.reui.io/components/native-select/c-native-select-5.md): Disabled native select.. Best for the whole control switched off, wrapper and chevron faded to half opacity.
- [Invalid](https://web.dev.reui.io/components/native-select/c-native-select-6.md): Invalid native select.. Best for an error state from aria-invalid alone, turning the border red with no message printed under it.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.