Switch
An instant on/off setting (Figma "Switch" 2056:47952): the label fills the row, the track sits at the end with the state word ("Ligado"/"Desligado"), and the whole row toggles it.
base-ui Switch (role="switch", Space and Enter toggle, a hidden input submits name). Use it for settings that apply at once; use a Checkbox Field for choices confirmed by a button.
<Switch checked={weekly} onCheckedChange={setWeekly} description="Toda segunda, às 8h.">Resumo semanal por e-mail</Switch>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Switch
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 | Ative para receber os alertas de risco. | ||||
| touch | Ative para receber os alertas de risco. |
Checked · True
| 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"). Without it (Figma showLabel off), pass `aria-label`. |
| description? | ReactNode | — | Second line in muted text (Figma "description"). |
| stateLabels? | { on: ReactNode; off: ReactNode; } | null | — | Figma "showStateLabel": the words drawn beside the track. Decorative: the switch announces its own state. |
| size? | "md" | "touch" | — | md = 320 px-style desktop row, touch = phone row (48 px). |
| error? | ReactNode | — | Error message under the row; makes the switch invalid (a required opt-in that is still off). |
| invalid? | boolean | — | |
| className? | string | — | |
| data-ds-state? | string | — | /__ds forced state (hover, focus). |