Consent & billing
PreCheckChoice
The pre-check card before the connection queue (Figma "Pre-check Choice" 2056:61941): a question, three answers and a primary that says what each answer does next.
The answers are Choice Cards with Indicator=Icon (inputs family): one radio group named by the question, arrow keys move the selection.
<PreCheckChoice question="Você vai precisar do celular da Lia por uns 3 minutos. Ele está com você?" options={options} primaryLabels={{ together: "Entrar na fila", "own-phone": "Mandar o link pra Lia", later: "Me lembrar amanhã" }} onSubmit={go} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Pre-check Choice
string
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).
Selection · Together
| Pre-check Choice |
|---|
Selection · Own phone
| Pre-check Choice |
|---|
Selection · Later
| Pre-check Choice |
|---|
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 |
|---|---|---|---|
| question | string | — | Figma `question`: the legend ("Você vai precisar do celular da Lia…"). |
| options | PreCheckOption[] | — | The three answers, in order. |
| primaryLabels | Record<"later" | "own-phone" | "together", string> | — | The primary label per selection: it names what happens next ("Entrar na fila", "Mandar o link pra Lia", "Me lembrar amanhã"). |
| footnote? | string | — | Figma `footnote`: why the queue exists, without numbers. |
| value? | "later" | "own-phone" | "together" | — | Controlled selection (Figma "Selection"). |
| defaultValue? | "later" | "own-phone" | "together" | "together" | Uncontrolled initial selection. |
| onValueChange? | ((value: PreCheckSelection) => void) | — | |
| onSubmit? | ((value: PreCheckSelection) => void) | — | Pressing the primary with the current selection. |
| loading? | boolean | false | Busy while the next step loads (the primary shows its spinner). |
| className? | string | — |