Select

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/primitives-select

pnpm dlx shadcn@latest add @spaceui/primitives-select

Usage

Code

import { Select, SelectItem, SelectPopup, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'

const items = [
  { label: 'Select framework', value: null },
  { label: 'Next.js', value: 'next' },
  { label: 'Vite', value: 'vite' },
  { label: 'Astro', value: 'astro' },
]

export default function SpaceUI() {
  return (
    <Select items={items}>
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectPopup>
        <SelectLabel>Frameworks</SelectLabel>
        {items.map((item) => (
          <SelectItem key={item.value} value={item}>
            {item.label}
          </SelectItem>
        ))}
      </SelectPopup>
    </Select>
  )
}

Anatomy

Code

<Select>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectPopup>
    <SelectList>
      <SelectGroup>
        <SelectGroupLabel />
        <SelectItem />
      </SelectGroup>
    </SelectList>
  </SelectPopup>
</Select>

Features

Sizes

Select triggers in sm, default, and lg sizes.

Accessibility

Adheres to the WAI-ARIA Combobox / Select Pattern.
Supports quick typeahead navigation to jump directly to options by typing.

Keyboard Interactions

Key	Action
`Space` / `Enter`	Opens the select dropdown or selects the active option.
`ArrowDown`	Moves highlight to the next item.
`ArrowUp`	Moves highlight to the previous item.
`Escape`	Closes the dropdown without making a selection.

Disabled State

Select component rendered in a disabled state via disabled.

Disabled Items

Select containing individual disabled option items.

API Reference

Select

Root component. Alias for Select.Root from Base UI.

SelectTrigger

Trigger button that opens the select dropdown. Styled wrapper for Select.Trigger from Base UI.

Prop	Type	Default	Description
`size`	sm\|default\|lg	default	Controls the size of the trigger

SelectValue

Displays the selected value. Styled wrapper for Select.Value from Base UI.

SelectPopup

Popup container for select options. Also exported as SelectContent.

Prop	Type	Default	Description
`showIcon`	boolean	true	Controls whether checkmark indicators are displayed next to items
`side`	top\|bottom\|left\|right	bottom	Preferred edge to position the popup relative to the trigger
`sideOffset`	number	4	Distance from the trigger in pixels
`align`	start\|center\|end	start	Alignment relative to the trigger along the cross-axis
`alignOffset`	number	0	Distance in pixels to shift the popup along the alignment axis
`alignItemWithTrigger`	boolean	true	Aligns the selected item with the trigger
`anchor`	Element\|null\|React.RefObject<Element>	-	Custom anchor element or ref to anchor the popup against
`portalProps`	Select.Portal.Props	-	Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see Base UI Select portal API

SelectItem

Individual select option. Styled wrapper for Select.Item from Base UI with built-in indicator.

Prop	Type	Default	Description
`showIcon`	boolean	true	Overrides popup showIcon setting for this individual item

SelectGroup

Groups related select items. Alias for Select.Group from Base UI.

SelectLabel

Label for all options in the popup. Styled wrapper for Select.Label from Base UI. Clicking it focuses the select trigger without opening the popup.

SelectGroupLabel

Label for a select group. Styled wrapper for Select.GroupLabel from Base UI.

SelectSeparator

Visual separator between items. Styled wrapper for Select.Separator from Base UI.

SelectButton

A standalone button styled like a SelectTrigger. Use it as a render prop on other trigger components (e.g., ComboboxTrigger, MenuTrigger) to give them select-like appearance.

Prop	Type	Default	Description
`size`	sm\|default\|lg	default	Controls the size of the button

Code

import { SelectButton } from '@/components/ui/select'

Code

<ComboboxTrigger render={<SelectButton />}>
  <ComboboxValue placeholder="Select a fruit" />
</ComboboxTrigger>

Examples

Select without item alignment

Select with groups

Multiple select

Select with icon

Select options with icon

Select with object values

Select in form

Timezone select

Status select with colored dot

Pill-shaped select trigger

Select with left text label

Select with country flags

Select with description in options only

Select with avatars

Rich select with avatars and usernames

Auto width select

Select with custom border and background

Select with label

Fruits