RadioGroup
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Radio Group
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).
Orientation · Vertical
| Default | Error | Disabled |
|---|---|---|
Por quanto tempo? | Por quanto tempo? Escolha por quanto tempo pausar. | Por quanto tempo? |
Orientation · Horizontal
| Default | Error | Disabled |
|---|---|---|
Por quanto tempo? | Por quanto tempo? Escolha por quanto tempo pausar. | Por quanto tempo? |
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 |
|---|---|---|---|
| label? | ReactNode | — | The group label (Figma "Legend"). Without it, pass `aria-label`. |
| required? | boolean | false | Red asterisk on the legend and `aria-required` on the group. |
| error? | ReactNode | — | Validation message under the options (Figma "Field Error"); makes the group invalid. |
| invalid? | boolean | — | |
| orientation? | "horizontal" | "vertical" | "vertical" | Figma "Orientation": stacked options, or a row that wraps. |
| size? | "md" | "touch" | "touch" | Size of every option: md = 40 px rows, touch = 48 px. |
| children | ReactNode | — | |
| className? | string | — | |
| disabled? | boolean | — | Whether the component should ignore user interaction. |
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).
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.