Inputs
CheckboxField
A checkbox with its label and optional description, where the whole row is the hit target (Figma "Checkbox Field" 2056:47820): consent attestation, opt-ins, backoffice bulk select.
The row is a <label>; the label text names the checkbox and the description describes it.
<CheckboxField size="touch" required checked={agreed} onCheckedChange={setAgreed} description="Você pode retirar o consentimento quando quiser.">Li e concordo com o termo</CheckboxField>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Checkbox Field
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
| Size | Default | Hover | Focus | Disabled | Error |
|---|---|---|---|---|---|
| md | |||||
| touch |
Checked · True
| Size | Default | Hover | Focus | Disabled | Error |
|---|---|---|---|---|---|
| md | |||||
| touch |
Checked · Indeterminate
| Size | Default | Hover | Focus | Disabled | Error |
|---|---|---|---|---|---|
| md | |||||
| touch |
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 |
|---|---|---|---|
| children | ReactNode | — | The label (Figma "label"). |
| description? | ReactNode | — | Second line in muted text (Figma "description"). |
| size? | "md" | "touch" | "touch" | md = 40 px row (desktop, backoffice), touch = 48 px (phone). |
| disabled? | boolean | — | Whether the component should ignore user interaction. |
| className? | string | — |