Small native select.
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: The sm size, 4px shorter than the default in every style, on a 2 option list
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 the Select component
- A long list the user narrows by typing before picking one: use the Combobox component
- Choices nested more than one level deep, such as region, then country, then city: use the Cascader component
Agent notes
sizetakes only sm or default; the type has no larger step for a taller controlclassNameonNativeSelectlands 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-3.mdget_example("c-native-select-3")npx shadcn@latest add @reui/c-native-select-3Shadcn Components in Native Select Small
About Shadcn Native Select Small
Small native select. 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-3 and edit as your own code.
What You Can Build With Shadcn Native Select Small
- 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-3
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Native Select Examples
- Basic Basic native select.
- Grouped Options Native select with options grouped.
- 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 Small?
Use it for the sm size, 4px shorter than the default in every style, on a 2 option list.
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 option rows that carry icons, avatars, badges or descriptions in the open list, use the Select component. For a long list the user narrows by typing before picking one, use the Combobox 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 Small?
Is Shadcn Native Select Small free to use?
Which components does Shadcn Native Select Small 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.