Components

Select

Dropdown selection built on React Aria - a base Select plus ComboBox, MultiSelect, TagSelect, and NativeSelect variants - driven from config/design-system.config.ts.

Component Playground

Live instance - the controls read their options from the same config that drives the Variants section below.

Role

md

Controls

Size

Placeholder

Sizes

Two sizes - sm and md (default). lg exists on the type (Untitled UI ships it) but isn’t a documented Figma variant for the base Select, so it isn’t demonstrated here - see Multi-select below, which does define lg.

Small / Medium

Small

sm

Medium

md

With icon

Pass an icon to show a leading icon on the closed trigger.

icon

Department

With avatar

Pass avatarUrl on an item - it replaces the icon slot with a real Avatar.

avatarUrl

Assign to

Supporting text

Add supportingText to an item for secondary detail next to the label - here, an email address.

supportingText

Assign to

Disabled

Disable the whole control with isDisabled, or a single item with isDisabled on that item - see “Frontend Engineer” above.

isDisabled

Role

Combobox

Select.ComboBox - a searchable variant with a text input instead of a static trigger.

The list floats in its own card under the field by default. Pass listbox="inline" to draw it in place, straight under the field and scrolling inside itself (popoverSize sets its height), for a ComboBox that already sits in a card or popup of its own - the breadcrumb project switcher is one: a search box at the top of a popup, the list beneath, and a fixed bar below. A listboxFooter in inline mode sits under the scrolling list, not inside it, so it stays on screen; it is part of the ComboBox's own region, so a screen reader still hears the list and its buttons while the list is open (a ComboBox hides everything outside its field and list), and a button in it is an ordinary button in the tab order.

Select

Role

Multi-select

MultiSelect - checkbox-style multiple selection, with a search field and a Reset/Select all footer.

MultiSelect

Assign to

Tag select

TagSelect - selected items render as removable tags inside the trigger itself.

TagSelect

Assign to

Olivia Wyatt

Native select

NativeSelect - renders a real <select>, for contexts (e.g. inside an InputGroup) that need native form behaviour over React Aria’s.

NativeSelect

Role

API

Props for the base Select. Select.ComboBox, MultiSelect, and TagSelect share the same size/label/hint/tooltip/placeholder shape, each with its own selection model on top - see the sections above for the exact API each one adds.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`label`	`string`	`-`
`placeholder`	`string`	`"Select"`
`hint`	`string`	`-`
`tooltip`	`string`	`-`
`icon`	`FC \| ReactNode`	`-`
`items`	`SelectItemType[]`	`-`
`hideRequiredIndicator`	`boolean`	`false`
`isDisabled`	`boolean`	`false`
`isRequired`	`boolean`	`false`
`isInvalid`	`boolean`	`false`
`selectedKey`	`Key \| null`	`-`
`defaultSelectedKey`	`Key \| null`	`-`
`onSelectionChange`	`(key: Key \| null) => void`	`-`
`popoverClassName`	`string`	`-`

Select.Item

One entry in items/children - shared by every Select variant.

Prop	Type	Default
`id`	`string \| number`	`-`
`label`	`string`	`-`
`avatarUrl`	`string`	`-`
`icon`	`FC \| ReactNode`	`-`
`supportingText`	`string`	`-`
`isDisabled`	`boolean`	`false`
`selectionIndicator`	`"checkmark" \| "checkbox" \| "none"`	`"checkmark"`
`selectionIndicatorAlign`	`"left" \| "right"`	`"right"`

Usage

import { Select } from "@/components/base/select/select";

const roles = [
  { id: "designer", label: "Product Designer" },
  { id: "pm", label: "Product Manager" },
];

<Select label="Role" placeholder="Select a role" items={roles}>
  {(item) => <Select.Item {...item}>{item.label}</Select.Item>}
</Select>

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.