Componentes — 05

Select

Dropdown nativo estilizado com seta customizada e o mesmo sistema de estados do Input. Preferível para listas longas e enumerações fixas.

05.1

Tamanhos

SM · MD · LG seguem a mesma escala do Input.

SM · MD · LG
<Select size="sm" options={forcas} placeholder="Selecione..." />
<Select size="md" options={forcas} placeholder="Selecione..." />
<Select size="lg" options={forcas} placeholder="Selecione..." />
05.2

Estados

Default com label
<Select label="Força" options={forcas} placeholder="Selecione..." />
Required
<Select label="Patente" options={patentes} required />
Error

Selecione um ano válido

<Select inputState="error" label="Ano de ingresso" helperText="Selecione um ano válido" required />
Success

Força confirmada

<Select inputState="success" label="Força" helperText="Confirmado" />
Disabled
<Select label="Região" defaultValue="sudeste" disabled />
05.3

Exemplo de Formulário

Select combinado com Input em um formulário de perfil.

Formulário de perfil militar
05.4

Tokens Usados

appearancenoneOculta seta nativa do SO
seta customizadaSVG inline12×12px, stroke currentColor
border--border-strong2px solid #433c34
focus shadow--accent2px 2px 0 var(--accent)
background (error)--state-error-pale#f7eaea
cursorpointer / not-allowedBaseado em disabled