Select
A flexible dropdown component built on Radix UI Select primitive. Supports icons, multiple variants, and seamless form integration.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Select component
Copy this code to create your Select component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
With Label
Select component can be paired with a label for better accessibility.
With Icon
Select items can include icons to enhance visual recognition.
Sizes
Select components come in different sizes to fit various UI contexts.
Error State
Select components can display an error state to indicate validation issues.
Disabled State
Select components and individual items can be disabled to prevent user interaction.
Compact
A more compact variant of the select component for space-constrained interfaces.
Inline
An inline variant of the select component that can be embedded within text content.
With Input
Select components can be combined with input fields for complex form controls.
API Reference
The Select component is built on top of the Radix UI Select primitive and extends its functionality with additional styling options and features.
Select.Root
Contains all the parts of a select.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default""compact""compactForInput""inline" | "default" | The visual style variant of the select. |
size | "sm""md""lg" | "md" | Controls the size of the select component. |
defaultValue | "string" | "undefined" | The value of the select item that should be selected when initially rendered. |
value | "string" | "undefined" | The controlled value of the select item to select. |
onValueChange | "function" | "undefined" | Event handler called when the value changes. |
disabled | "boolean" | "false" | When true, prevents the user from interacting with the select. |
Select.Trigger
The button that toggles the select. The Select.Value will be rendered inside the trigger.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
error | "boolean" | "false" | When true, applies error styling to the select trigger. |
className | "string" | "undefined" | Additional CSS classes to apply to the select trigger. |
Select.Content
The component that pops out when the select is open.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
position | "popper""item-aligned" | "popper" | The positioning strategy to use. |
side | "top""right""bottom""left" | "bottom" | The preferred side of the trigger to render against when open. |
sideOffset | "number" | "8" | The distance in pixels from the trigger. |
className | "string" | "undefined" | Additional CSS classes to apply to the select content. |
Select.Item
The component that contains a select item.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
value | "string" | "undefined" | The unique value of the item. |
disabled | "boolean" | "false" | When true, prevents the user from interacting with the item. |
className | "string" | "undefined" | Additional CSS classes to apply to the select item. |