CardOption
Cartão de opção com o controle trocável: checkbox, rádio ou switch. O cartão é um rótulo nativo do controle, então o clique, o teclado e o envio do formulário seguem o comportamento do próprio controle.
Tipo de assinatura
Com type="radio", o grupo vira um radiogroup: Tab entra no grupo e as setas trocam a opção.
Selecionado: electronic
Planos de envio em lista
Com layout="list", o grupo desenha a borda e cada item vira uma linha. O destaque de selecionado fica desligado por padrão e pode ser ligado no grupo.
Notificações do signatário
Com type="switch", o controle fica à direita e o cartão não pinta o estado: switch é configuração, não escolha.
Checkbox e tamanhos
Props do CardOption
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| type | "checkbox" | "radio" | "switch" | do grupo ou "checkbox" | Controle do cartão. Rádio exige um CardOptionGroup com type="radio". |
| value | string | — | Valor do rádio no grupo, ou valor enviado pelo checkbox e pelo switch. |
| label | ReactNode | — | Texto principal. Rotula o controle. |
| description | ReactNode | — | Texto de apoio ligado por aria-describedby. |
| icon | ReactNode | — | Ícone ao lado do texto. |
| checked / defaultChecked | boolean | — | Estado do checkbox e do switch. |
| onCheckedChange | (checked: boolean) => void | — | Mudança do checkbox e do switch. |
| controlPlacement | "start" | "end" | start, ou end no switch | Lado do controle. O ícone continua à esquerda do texto. |
| highlightSelected | boolean | true, ou false no switch e em lista | Pinta fundo e borda quando marcado. |
| size | "sm" | "md" | "lg" | "md" | Espaçamento, raio e tipografia. |
| disabled | boolean | — | Bloqueia o controle. |
Props do CardOptionGroup
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| type | "checkbox" | "radio" | "switch" | "checkbox" | Aplicado a todos os itens. Rádio transforma o grupo em radiogroup. |
| layout | "spaced" | "list" | "spaced" | Cartões separados ou uma lista com divisórias. |
| value / defaultValue / onValueChange | string | — | Seleção do grupo de rádio. |
| name / required | string / boolean | — | Envio nativo do grupo de rádio. |
| size / controlPlacement / highlightSelected | — | — | Padrões herdados pelos itens. |
| disabled | boolean | — | Bloqueia todos os itens. |