Native Select
Styled wrapper around the native select element. Install Native Select from the VLLNT UI registry with the shadcn CLI.
Supported platforms:WebNative
2 storiesView componentSelect
Dropdown select input for choosing from a list of options. Install Select from the VLLNT UI registry with the shadcn CLI. React Native source for Select is included in VLLNT UI 0.4.0 for iOS and Android. It is source-only; npm publication is pending.
Supported platforms:WebNative
What it is and when to use
Select is a dropdown input built on Radix UI's Select primitive for choosing a single value from a list. Click the trigger to open a portal-rendered menu with keyboard navigation, typeahead, grouped options, labels, separators, and scroll buttons for long lists. Use it in forms when the option set is known and you want a styled, accessible alternative to the native select element. It is composed from Select, SelectTrigger, SelectContent, and SelectItem parts.
FormPreview
Switch between light and dark to inspect the embedded Storybook preview.
Dropdown select input for choosing from a list of options. Part of the form family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | @vllnt/ui-native, react-native | Native-adapted interaction and accessibility |
Installation
Add Select to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/select.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Select?
- Select is an accessible dropdown input for React, built on Radix UI's Select primitive. It lets users choose one value from a list and is composed of Select, SelectTrigger, SelectContent, and SelectItem parts.
- How do I add Select?
- Run pnpm dlx shadcn@latest add https://ui.vllnt.com/r/select.json to copy the source into your project, then import the Select parts from your ui directory.
- Is Select keyboard accessible?
- Yes. Because it wraps Radix UI's Select primitive, it supports full keyboard navigation, typeahead to jump to options, and correct listbox ARIA roles out of the box.