7onicDESIGN SYSTEM

Select

Select is a form control for choosing a single value from a dropdown list. It features an accessible implementation with keyboard navigation and screen reader support, and also supports native form submission.

2
Position
5
Sizes
Form
Sync
Radix
Base

Playground

Preview
default
Size
Radius
Position
Flush
Disabled
<Select>
  <Select.Trigger>
    <Select.Value placeholder="Select a fruit" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="apple">Apple</Select.Item>
    <Select.Item value="banana">Banana</Select.Item>
    <Select.Item value="cherry">Cherry</Select.Item>
    <Select.Item value="grape">Grape</Select.Item>
  </Select.Content>
</Select>

Variants

Basic
The simplest select — a single-choice list
Category selection
Grouped
Organize related items with groups and labels.
Country, region
With Placeholder
Show placeholder when nothing is selected.
Initial guidance
Flush
Full-width items — no border radius, edge-to-edge
Dense lists
Disabled Items
Make some items unselectable.
Unavailable options

Sizes

xs
Height36px
Font13px
sm
Height40px
Font14px
default
Height44px
Font16px
lg
Height48px
Font16px
xl
Height56px
Font16px

API

Component Structure

Select— Radix Select
.TriggerProps.Value.ContentProps.ItemProps.Group.Label.Separator

Props

Select (Root)

size"default"
"xs" | "sm" | "default" | "lg" | "xl"

Trigger height and font size. Auto-propagates to Content

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

Border radius size (6px). Applied directly to Trigger, auto-mapped to Content

valueundefined
string

Selected value for controlled mode

defaultValueundefined
string

Initial value for uncontrolled mode

onValueChangeundefined
(value: string) => void

Callback when value changes

nameundefined
string

Name for form submission

requiredundefined
boolean

Mark as required field

disabledundefined
boolean

Disable the entire select

openundefined
boolean

Open state for controlled mode

onOpenChangeundefined
(open: boolean) => void

Callback when open state changes

Select.Trigger

disabledundefined
boolean

Disable the trigger button

asChildfalse
boolean

Render child element as trigger

Select.Content

position"popper"
"item-aligned" | "popper"

Dropdown positioning method

flushfalse
boolean

Display items full-width (no padding)

side"bottom"
"top" | "right" | "bottom" | "left"

Dropdown display direction (popper only)

sideOffset1
number

Distance from trigger (px)

Select.Item

value—
string

Item value (required)

disabledundefined
boolean

Make item unselectable

textValueundefined
string

Text value for typeahead

Customization

classNameto customize the style of triggers and content.

Change width

<Select.Content className="w-72">

Full-width trigger

<Select.Trigger className="w-full">

Tip: Each sub-component accepts className, allowing you to override styles with Tailwind classes.

Anatomy

1
2
3
Apple
4
5
6
Apple
7
Banana
Cherry
1
Root
Component root
2
Trigger
Button to open select
3
Value
Selected value display
4
Chevron
Open/close icon
5
Content
Dropdown panel
6
Item
Selection item
7
Separator
Divider

Best Practices

✓

Recommended

  • ✓Use when there are 5 or more options
  • ✓Use Group to classify when there are many options
  • ✓Guide selection with placeholder
  • ✓Set name and required in forms
✕

Avoid

  • ✗Consider Radio for 3 or fewer options
  • ✗Use Dropdown for executing actions
  • ✗Consider alternative UI for multi-select needs
  • ✗Don't leave both placeholder and initial value empty

Accessibility

Keyboard

EnterOpen/close select / select item
SpaceOpen/close select / select item
↑ ↓Navigate between items
HomeMove to first item
EndMove to last item
EscapeClose select

ARIA Attributes

  • role="listbox" Auto-applied to Content
  • role="option" Auto-applied to Item
  • aria-expanded Trigger state management
  • Character search via typeahead

Select vs Dropdown

They look similar but serve different purposes. Choose the right component for your use case.

Purpose

Select: Value selection

Dropdown: Action execution

Form integration

Select: name / value submission

Dropdown: None

After selection

Select: Value reflected in trigger

Dropdown: Menu just closes

Item types

Select: Single selection items

Dropdown: Item, Checkbox, Radio, Sub

Use cases

Select: Country, category, sort order

Dropdown: Context menu, account actions

Selection guide: Select is appropriate when users choose a value to submit in a form. When clicking triggers an action (edit, delete, share, etc.), use Dropdown instead.