Skip to content
Primer Design System

Primer Design System

Select

Select is an input for selecting a single option from a menu.

On this page

  • Updated 10 Dec 2024

Playground

No preview available
caption?
menu?
label?
fullWidth?
size
state
validation

Props

NameTypeValuesDefault
caption?Booleantrue false false
menu?Booleantrue false false
label?Booleantrue false true
sizeVariantmedium small large medium
stateVariantrest focus disabled rest
validationVariantnone invalid success none
fullWidth?Variantfalse true false

caption?

caption?: true, menu?: true, label?: true, size: small, state: disabled, validation: none, fullWidth?: true
true
menu?: true, caption?: false, label?: true, size: large, state: rest, validation: none, fullWidth?: false
false

menu?

caption?: true, menu?: true, label?: true, size: small, state: disabled, validation: none, fullWidth?: true
true
label?: true, caption?: false, menu?: false, size: medium, state: rest, validation: none, fullWidth?: false
false

label?

caption?: true, menu?: true, label?: true, size: small, state: disabled, validation: none, fullWidth?: true
true
menu?: true, caption?: false, label?: false, size: medium, state: rest, validation: none, fullWidth?: false
false

size

caption?: true, menu?: true, label?: true, size: small, state: disabled, validation: none, fullWidth?: true
small
menu?: true, caption?: false, label?: true, size: large, state: rest, validation: none, fullWidth?: false
large
caption?: false, menu?: true, label?: true, size: medium, state: rest, validation: invalid, fullWidth?: false
medium

state

caption?: true, menu?: true, label?: true, size: small, state: disabled, validation: none, fullWidth?: true
disabled
menu?: true, caption?: false, label?: true, size: large, state: rest, validation: none, fullWidth?: false
rest
caption?: false, menu?: true, label?: true, size: large, state: focus, validation: none, fullWidth?: false
focus

validation

caption?: true, menu?: true, label?: true, size: small, state: disabled, validation: none, fullWidth?: true
none
caption?: false, menu?: true, label?: true, size: medium, state: rest, validation: invalid, fullWidth?: false
invalid
menu?: true, caption?: false, label?: true, size: medium, state: rest, validation: success, fullWidth?: false
success

fullWidth?

caption?: true, menu?: true, label?: true, size: small, state: disabled, validation: none, fullWidth?: true
true
menu?: true, caption?: false, label?: true, size: large, state: rest, validation: none, fullWidth?: false
false