Create accessible dropdown selects with Radix UI in Webstudio.
Based on Radix Select
The Select component displays a dropdown list of options for users to choose from. It's a styled alternative to the native HTML <select> element with full keyboard navigation and accessibility support.
Use Select for:
Choosing from a predefined list of options
Form fields where users must pick one value
Settings and preferences
Any dropdown selection
The Select component consists of several parts:
Select
The root component managing state
Select Trigger
The button showing the current value
Select Value
Displays the selected option's text
Select Content
The dropdown panel
Select Viewport
Scrollable container for items
Select Item
Individual selectable option
Select Item Text
The text label for an item
Select Item Indicator
Checkmark shown on selected item
Drag a Select component from Components > Radix onto your canvas
The component comes pre-configured with sample items
Edit, add, or remove Select Items inside the Select Viewport
Set the value property on each Select Item to identify it
Style the trigger and dropdown to match your design
To populate Select options dynamically from data:
Add a Collection inside the Select Viewport
Add a Select Item inside the Collection
Bind the value property to a unique identifier from your data
Bind the Select Item Text to your label field
Some commonly used properties (see the Settings panel for all available options):
name
Form field name for submission
value
The currently selected value
open
Controls dropdown visibility (for styling)
required
Whether a selection is required
value
Unique identifier for this option (required)
placeholder
Text shown when nothing is selected
Radio Group – Selection from visible options
Switch – Toggle control for binary choices
Form – Container for form elements and submission handling
Collection – Generate select options dynamically from data
Label – Accessible labels for form controls
Last updated
Was this helpful?
Was this helpful?
