Native select with options grouped.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Fruits and vegetables under 2 group headings, 3 choices in each, below an ungrouped prompt
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
- Grouped options the user filters by typing a few letters: use the Combobox component
- Option rows that carry icons, avatars, badges or descriptions in the open list: use the Select component
- Choices nested more than one level deep, such as region, then country, then city: use the Cascader component
Agent notes
classNameonNativeSelectlands on its wrapperdiv; every other prop, such asid,disabledoraria-invalid, goes to the innerselect- The first option's text never names the control; tie a
FieldLabelto theNativeSelectidasc-native-select-4does, 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
https://reui.io/components/native-select/c-native-select-2.mdget_example("c-native-select-2")npx shadcn@latest add @reui/c-native-select-2Shadcn Components in Native Select Grouped Options
About Shadcn Native Select Grouped Options
Native select with options grouped. Built with the Native Select component. A free, open source shadcn native select example you can install with npx shadcn@latest add @reui/c-native-select-2 and edit as your own code.
What You Can Build With Shadcn Native Select Grouped Options
- Composes Native Select, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-native-select-2
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Native Select Examples
- Basic Basic native select.
- Small Small native select.
- Field With Label Native select embedded within a field.
- Disabled Disabled native select.
- Invalid Invalid native select.
Related Shadcn Component Categories
Open-source shadcn navigation menu components for site navigation, mega menus, and product navigation.
Open-source shadcn number field components for quantity pickers, pricing inputs, and step controls.
Open-source shadcn pagination components for table pagination, search results, and content archives.
Open-source shadcn phone input components for international signup, contact forms, and country codes.
Open-source shadcn popover components for inline settings, contextual actions, and lightweight overlays.
Open-source shadcn progress components for upload progress, goal tracking, and setup steps.
Frequently Asked Questions
When should I use Shadcn Native Select Grouped Options?
Use it for fruits and vegetables under 2 group headings, 3 choices in each, below an ungrouped prompt.
Shadcn Native Select as a whole fits:
- 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
For grouped options the user filters by typing a few letters, use the Combobox component. For option rows that carry icons, avatars, badges or descriptions in the open list, use the Select component. For choices nested more than one level deep, such as region, then country, then city, use the Cascader component.
How do I install Shadcn Native Select Grouped Options?
Is Shadcn Native Select Grouped Options free to use?
Which components does Shadcn Native Select Grouped Options use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.