Prepared Docs

Select displays a dropdown menu of predefined options, allowing users to choose one value from a list. It supports both flat and grouped options, with optional placeholder text and disabled states. It provides a standard dropdown selection interface where users choose from predefined options. Built on Radix UI's Select component, it ensures consistent selection patterns across the interface with full keyboard and screen reader accessibility. Ideal for forms, filters, and configuration where users select from known options without needing to search.

Props

Name	Type	Default	Description
`id`	`string`	—	Unique identifier linking the trigger to its label.
`items`	`(SelectItem \| Record<string, SelectItem[]>)[]`	—	Flat or grouped list of options. Use `Record<string, SelectItem[]>` for optgroup-style grouping.
`label`	`string`	—	Text label for the select. Used as visible label or `aria-label` when `hideLabel` is true.
`active`	`boolean`	—	When true, applies an active/pressed visual state.
`as`	`InteractableTag`	`InteractableTag.Button`	HTML element tag to render.
`className`	`string`	—	Additional CSS class name(s) applied to the element.
`hideLabel`	`boolean`	`false`	When true, hides the visible label and uses it as an `aria-label` instead.
`href`	`string`	—	URL for anchor-based interactables. Changes the rendered element to an `<a>` tag.
`injectChild`	`boolean`	—	Choose to inject interactivity into a child element such as a Div element
`interactionType`	`InteractableType`	`InteractableType.Default`	Visual style variant for the interactive element.
`placeholder`	`string`	—	Placeholder text shown when no value is selected.
`rel`	`string`	—	Relationship for anchor-based interactables (for example `noopener noreferrer`).
`role`	`string`	—	ARIA role attribute for the interactive element.
`tabIndex`	`number`	—	Overrides the default tab order for non-disabled elements. Pass `-1` to remove the element from the tab sequence while keeping it programmatically focusable — useful for listbox/menu items that participate in roving-tabindex / cmdk-style keyboard navigation (the parent handles arrow keys; items should not be reachable via Tab). `disabled` always wins: disabled elements are forced to `-1` regardless of this prop, since putting a disabled control in the tab order is an accessibility bug. Defaults to `0` for enabled elements and `-1` for disabled ones.
`target`	`HTMLAttributeAnchorTarget`	—	Target for anchor-based interactables (for example `_blank`).
`title`	`string`	—	Native HTML title attribute for browser tooltip fallback
`tooltip`	`string`	—	Optional tooltip text to display on hover (uses Radix Tooltip)
`tooltipSide`	`TooltipPosition`	—	Position of the tooltip relative to the element, defaults to "top"
`triggerTestId`	`string`	—	`data-testid` attribute applied to the trigger button for testing.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Basic Select

Use for simple selection from a list of options.

Controlled Select

Control selection state programmatically.

With Placeholder

Display placeholder text when no option is selected.

Grouped Options

Organize options into groups for better organization.

Mixed Grouping

Combine grouped and ungrouped options.

Disabled Options

Disable specific options or the entire select.

Hidden Label

Hide the visible label while maintaining accessibility.

With Auto Focus

Automatically focus the select when it mounts.

Required Select

Mark the select as required in forms.

Component Comparison

Choose the appropriate component based on your use case and requirements.

When to Use Select

Use Select when:

Users choose from a predefined list of options
Options are known and don't require searching
The list has fewer than 50 options (more than that, consider Combobox)
Options can be organized into groups
Users need a simple, standard dropdown interface
Space is limited and a compact control is needed

Example use cases:

Country or region selection
Configuration settings
Category filters
Simple form fields with predefined options

When to Use Combobox

Use Combobox when:

Users need to search or filter through options
The list has many options (50+)
Options may be dynamically loaded or filtered
Users benefit from typing to find options
Options need rich content (icons, descriptions, badges)
You need keyboard-accessible search functionality

Example use cases:

Selecting from a large list of users or contacts
Searching through products or items
Language selection with multiple attributes
Any selection where typing speeds up the process

When to Use InputWithSelect

Use InputWithSelect when:

You need both text input and a related dropdown selector
The select modifies or contextualizes the input value
You're building inputs like currency amounts or phone numbers
The select and input form a single logical unit

Example use cases:

Currency input (USD selector + amount input)
Phone number input (country code + phone number)
Weight or measurement (unit selector + value input)
Rate input (currency + "/hour" or similar)

When to Use Input

Use Input when:

Users enter free-form text or data
No predefined options exist
The value is not constrained to a specific set
You need standard text, number, email, or password input

Example use cases:

Name, email, or address fields
Search queries
Numeric values without units
Any free-form text entry

Comparison Examples

Select vs Combobox

Select - Simple dropdown for known options:

Combobox - Searchable dropdown for large lists:

Select vs InputWithSelect

Select - Standalone dropdown selection:

InputWithSelect - Combined input and selector:

Select / Usage

Select / Accessibility

When to Use InputWithSelect

When to Use Input

Comparison Examples

Select vs Combobox

Select vs InputWithSelect

View Source

Submit Issue

Props

Name	Type	Default	Description
`id`	`string`	—	Unique identifier linking the trigger to its label.
`items`	`(SelectItem \| Record<string, SelectItem[]>)[]`	—	Flat or grouped list of options. Use `Record<string, SelectItem[]>` for optgroup-style grouping.
`label`	`string`	—	Text label for the select. Used as visible label or `aria-label` when `hideLabel` is true.
`active`	`boolean`	—	When true, applies an active/pressed visual state.
`as`	`InteractableTag`	`InteractableTag.Button`	HTML element tag to render.
`className`	`string`	—	Additional CSS class name(s) applied to the element.
`hideLabel`	`boolean`	`false`	When true, hides the visible label and uses it as an `aria-label` instead.
`href`	`string`	—	URL for anchor-based interactables. Changes the rendered element to an `<a>` tag.
`injectChild`	`boolean`	—	Choose to inject interactivity into a child element such as a Div element
`interactionType`	`InteractableType`	`InteractableType.Default`	Visual style variant for the interactive element.
`placeholder`	`string`	—	Placeholder text shown when no value is selected.
`rel`	`string`	—	Relationship for anchor-based interactables (for example `noopener noreferrer`).
`role`	`string`	—	ARIA role attribute for the interactive element.
`tabIndex`	`number`	—	Overrides the default tab order for non-disabled elements. Pass `-1` to remove the element from the tab sequence while keeping it programmatically focusable — useful for listbox/menu items that participate in roving-tabindex / cmdk-style keyboard navigation (the parent handles arrow keys; items should not be reachable via Tab). `disabled` always wins: disabled elements are forced to `-1` regardless of this prop, since putting a disabled control in the tab order is an accessibility bug. Defaults to `0` for enabled elements and `-1` for disabled ones.
`target`	`HTMLAttributeAnchorTarget`	—	Target for anchor-based interactables (for example `_blank`).
`title`	`string`	—	Native HTML title attribute for browser tooltip fallback
`tooltip`	`string`	—	Optional tooltip text to display on hover (uses Radix Tooltip)
`tooltipSide`	`TooltipPosition`	—	Position of the tooltip relative to the element, defaults to "top"
`triggerTestId`	`string`	—	`data-testid` attribute applied to the trigger button for testing.