Inputs
Radio
One option of a Radio Group (Figma "Radio" 2056:47450): the circle, its label and an optional description; the whole row is the hit target (40 px md, 48 px touch).
Must sit inside RadioGroup.Root.
<RadioGroup.Item value="7" description="A proteção volta sozinha no dia 25.">Pausar por 7 dias</RadioGroup.Item>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Radio
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 |
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 option label (Figma "label"). |
| description? | ReactNode | — | Second line in muted text (Figma "description"). |
| size? | "md" | "touch" | — | Overrides the group's size for this option. |
| disabled? | boolean | — | Whether the component should ignore user interaction. |
| className? | string | — |