Select

A flexible select component supporting flat and grouped options. Built on Radix UI primitives with customizable styling and positioning. Perfect for dropdown selections in forms.

Installation

Import

Usage

Use Select for dropdown selections in forms. Choose flat options for simple lists and grouped options for categorized selections. Use controlled value for form integration. Set showLabel=false when you want to display custom content instead of the option label. For form integration with validation and error handling, use SelectField which extends ComposedSelect and integrates with Conform forms.

Design Guidelines

Maintain consistent select styling with your form inputs. Use appropriate sizes for your form layout. Group related options for better organization. Provide clear placeholder text. Position content appropriately to avoid viewport overflow.

User Preferences Form

Form with language and timezone selection

Grouped Options

Select with grouped options for better organization

Select Sizes

Demonstrating different select sizes in a form

E-commerce Checkout Form

Complete checkout form with category, shipping method, and payment selection

SelectField with Validation

SelectField automatically displays validation errors from form schema

SelectField

SelectField extends ComposedSelect with form integration, labels, error handling, and validation support. Use SelectField when building forms with Conform. packages.composedComponents.extends ComposedSelect. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.description
`field`	`FieldMetadata`	—	Conform field metadata for form integration and validation
`label`	`string \| React.ReactNode`	—	Label text displayed above the select field
`topText`	`string \| React.ReactNode`	—	Helper text displayed above the label
`labelProps`	`React.LabelHTMLAttributes<HTMLLabelElement>`	—	Additional props for the label element
`className`	`string`	—	packages.commonProps.className.description

packages.sections.api

Component props and API reference This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. For detailed documentation and examples, see the Style Props documentation.

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.description
`options`	`Option<React.ReactNode>[] \| GroupOptions[]`	—	Array of options. Can be flat options or grouped options when grouped=true
`grouped`	`boolean`	`false`	Whether the options are grouped. When true, options must be GroupOptions[]
`placeholder`	`string`	—	Placeholder text displayed when no value is selected
`showLabel`	`boolean`	`true`	Whether to show the selected option label
`contentPosition`	`"popper" \| "item-aligned"`	—	Position of the select content relative to trigger
`sideOffset`	`number`	—	Offset in pixels from the trigger
`value`	`string`	—	Controlled selected value
`onValueChange`	`(value: string) => void`	—	Callback fired when selection changes
`inputSize`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Size of the select trigger
`className`	`string`	—	packages.commonProps.className.description

Accessibility

Accessibility features and considerations

Select includes proper ARIA attributes and keyboard navigation. Supports arrow keys, Enter, Escape, and Tab. Screen readers announce options and selections. Ensure options have descriptive labels.

packages.title