#Select

Holds one answer, or several, chosen from a list — below about six options expose them instead with Radio or SegmentedControl, and reach for DropdownMenu when the items run commands rather than set a value. The trigger is composed rather than configured: SelectButton for a button-shaped trigger, SelectInput for one that looks like a field.

Source · Storybook

#Usage

import { Select, SelectButton, SelectContent, SelectOption, SelectOptionIndicator, SelectOptionText, SelectPositioner } from '@wallarm-org/design-system/Select';

#Examples

#Sizes

The same height scale as the other fields, so a select sits in a row of inputs without breaking the line.

#Different buttons

The trigger is yours to shape — labelled, icon-led, or value-only. Whatever it looks like, it must still read as something that opens.

#Multiple

multiple collects several answers, and the trigger summarises them. Once past a couple of selections a summary beats a list, which is what WithTags is for.

#Multiple with icons

Icons carry the option's identity into the closed trigger, which matters more in a multi-select where the text is compressed into a summary.

#Grouped

SelectGroup with SelectGroupLabel splits a long list into named sections. Group when the reader would otherwise scan, not merely because the options have categories.

#Disabled

The whole control is out, trigger included. Disabling individual options instead keeps the list honest about what exists.

#Loading

loading on the root, for a list still being fetched. It holds the trigger's shape so the layout doesn't jump when the options land.

#With select input

SelectInput makes the trigger look like a text field, which suits a select sitting in a form beside real inputs rather than in a toolbar.

#With separator

SelectSeparator divides kinds of option — a destructive or clear-all entry from the real choices — where a group label would be overkill.

#With icons

SelectValueIcon in the option and the trigger, so the chosen option keeps its icon once the menu closes.

#With footer

SelectFooter pins content below the scrolling list, for a persistent escape like managing the options themselves.

#With search

SelectSearchInput with the useSelectSearch hook, plus SelectEmptyState for when nothing matches. Add search once the list outgrows a glance — roughly ten options.

#With form field

Inside Field, so the label and description come from FieldLabel and FieldDescription rather than from the select.

#With tags

Selections render as removable tags inside the field, which is the honest shape for multi-select when the reader needs to see and undo each choice individually.

#Props

#SelectEmptyState

#SelectFooter

#SelectOptionHint

#SelectPositioner

#SelectSearchInput

#SelectSeparator

#Explorer