Inputs
Checkbox
The DS checkbox box (Figma "Checkbox" 170:204): checked, unchecked or indeterminate (a minus, for "some selected").
base-ui Checkbox: a role="checkbox" element plus a hidden native input, so name/value submit with a form and checked/defaultChecked/onCheckedChange work controlled or not. On its own it is only 16 px: put it in a Checkbox Field (40/48 px row) wherever people tap it.
<Checkbox aria-label="Selecionar todos" indeterminate onCheckedChange={toggleAll} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Checkbox
boolean
boolean
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Checked · False
| Default | Focus | Disabled | Invalid | Hover |
|---|---|---|---|---|
Checked · True
| Default | Focus | Disabled | Invalid | Hover |
|---|---|---|---|---|
Checked · Indeterminate
| Default | Focus | Disabled | Invalid | Hover |
|---|---|---|---|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| invalid? | boolean | — | Error look + `aria-invalid` (Figma `State=Invalid`). |
| className? | string | — | |
| required? | boolean | — | Whether the user must tick the checkbox before submitting a form. |