Selectbox

Playground

🎛 Type=Basic
👕 Size=Medium
🕹 State=Default
Disable=False
Error=False
Fluid=True

Anatomy

The box shows the placeholder or the chosen value and an arrow. When it opens, a Dropdown appears 4px below it with one Cell per option; Multiselect cells have a checkbox.

See also: Dropdown, Cell

Types

Basic picks one value. Inner Label draws the label inside the box. Multiselect picks many and shows a count badge; Chip shows each choice as a chip.

Sizes

Large, Medium, Small and Tiny. Medium and Large use Medium cells in the list, Small and Tiny use Small cells.

States

Hover draws the primary tint line; Focus and Active (open) the primary line with the focus ring. Error turns the line, placeholder and label red and adds the error icon.

Tokens

Notes from Figma

• The resting box has no line, only the card style 1 shadow, unlike Input, which has a surface/level-4 line.
• The box radius is a raw 8px in every size; code uses --radius-form-element-small.
• The arrows are “Icon/arrow down” and “Icon/arrow up”, which are not on the Icons page; code uses arrow-bottom and arrow-top.
• Medium Error puts 8px between the error icon and the arrow, the other states 12px.
• Inner Label exists only in Medium. Its resting state shows no label, so code shows the label as the placeholder until the box is focused, opened or filled.
• Figma has no search in the list; searchable uses Cell Type=Search at the top of the Dropdown.

Figma to code