Choice
Opção em cartão com seleção única. Funciona como um grupo de rádio: Tab entra no grupo, as setas trocam a opção e o indicador entra com o gesto de carimbo.
Como o signatário vai assinar
Grupo vertical com ícone e descrição. A escolha fica no estado da página.
Selecionado: drawn
Horizontal e sem seleção inicial
No celular as opções empilham. Sem valor inicial, todas entram na ordem de tabulação até a primeira escolha.
Item avulso
Fora de um ChoiceGroup, o item é controlado por active e onClick.
Uso
<ChoiceGroup value={method} onValueChange={setMethod} aria-label="Forma de assinatura">
<ChoiceItem value="drawn" icon={<PenLine />} title="Desenhar a assinatura" />
<ChoiceItem value="certificate" icon={<ShieldCheck />} title="Certificado digital" />
</ChoiceGroup>Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| ChoiceGroup.value | string | — | Valor selecionado (controlado). |
| ChoiceGroup.defaultValue | string | — | Valor inicial quando não controlado. |
| ChoiceGroup.onValueChange | (value: string) => void | — | Chamado ao escolher uma opção, por clique ou setas. |
| ChoiceGroup.orientation | "vertical" | "horizontal" | "vertical" | Horizontal vira coluna abaixo de 640px. |
| ChoiceGroup.disabled | boolean | false | Desabilita todas as opções. |
| ChoiceItem.value | string | — | Identificador da opção dentro do grupo. |
| ChoiceItem.title | ReactNode | — | Rótulo principal. |
| ChoiceItem.description | ReactNode | — | Texto de apoio opcional. |
| ChoiceItem.icon | ReactNode | — | Ícone à esquerda. |
| ChoiceItem.active | boolean | — | Estado selecionado quando o item é usado fora de um grupo. |