Inputs
ChoiceCard
A big tappable answer (Figma "Choice Card" 2056:55357, replaces Kind Option): title, optional body and badge, and an indicator.
Selected is an ink border on lilac plus the checked control or a check icon, so it is never colour alone. Must sit inside ChoiceGroup.Root.
<ChoiceGroup.Card value="pix" indicator="radio" body="Débito todo mês, sem cartão">Pix Automático</ChoiceGroup.Card>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Choice Card
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).
Indicator · Radio
| Default | Hover | Focus | Selected | Disabled | Error |
|---|---|---|---|---|---|
Indicator · Checkbox
| Default | Hover | Focus | Selected | Disabled | Error |
|---|---|---|---|---|---|
Indicator · Icon
| Default | Hover | Focus | Selected | Disabled | Error |
|---|---|---|---|---|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
ChoiceGroupProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| type? | "multiple" | "single" | — | One answer (radio semantics: arrows move and select). Several answers (checkbox semantics). |
| value? | string | string[] | — | |
| defaultValue? | string | string[] | — | |
| onValueChange? | ((value: string) => void) | ((value: string[]) => void) | — |
ChoiceCardProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| value | string | — | The answer this card stands for. |
| children | ReactNode | — | The title (Figma "title"). |
| body? | ReactNode | — | The line under the title (Figma "body"). |
| badge? | ReactNode | — | A short tag at the end, e.g. "Recomendado" (Figma "badge"). |
| indicator? | "checkbox" | "icon" | "radio" | — | Figma "Indicator": a radio or checkbox drawn at the start, or an icon tile with a check when selected. Defaults to the group's type. |
| icon? | ReactNode | — | The glyph of the Icon indicator (a lucide element). |
| disabled? | boolean | false | |
| className? | string | — |