Componentes
ChoiceCard
Escolha que precisa mostrar o preço da decisão. É o Radio quando a opção não cabe numa linha: ícone, título, explicação e o total no pé. Marca no canto, luz azul quando ativo.
Exemplos#
Forma de pagamento · uma entre poucas, com a marca no canto
Parcelas em duas colunas · parcela e total no mesmo cartão
Adicional pago · multiple, sempre desmarcado por padrão
Mesa
Celular · 390
Etiqueta ao lado do título · grupo sem escolha avisa
Importar#
import { ChoiceCardGroup, ChoiceCard } from "@hiboupay/react";
import type { ChoiceCardGroupProps, ChoiceCardProps } from "@hiboupay/react";Quando usar#
Use quando
- Forma de pagamento no checkout.
- Condição de parcelamento com valor e total.
- Adicional opcional com preço (seguro, garantia).
Não use quando
- Opção que cabe numa linha: Radio.
- Aceitar um termo: Checkbox.
- Lista longa: Select.
- Filtrar uma tabela: FilterChip.
Variantes#
radio
Uma entre poucas. Padrão.
multiple
Vários adicionais ao mesmo tempo. A marca vira check.
Anatomia#
- 01fieldset com legend (hb-label)
- 02Cartão de papel, raio 16
- 03Ícone opcional em tile
- 04Título type.lead
- 05Etiqueta Badge opcional
- 06Descrição
- 07Rodapé separado por linha fina
- 08ChoiceMark no canto superior direito
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| ChoiceCardGroup.name* | string | name nativo compartilhado. | |
| ChoiceCardGroup.multiple | boolean | false | Troca radio por checkbox; value vira string[]. |
| ChoiceCardGroup.value | string | string[] | Controlado. Array quando multiple. | |
| ChoiceCardGroup.onValueChange | (value: string | string[]) => void | Nova escolha. | |
| ChoiceCardGroup.columns | 1 | 2 | { base, md } | 1 | Uma ou duas colunas. Objeto troca no corte md do contêiner. |
| ChoiceCardGroup.invalid | boolean | false | Grupo obrigatório sem escolha. aria-invalid no fieldset. |
| ChoiceCardGroup.message | string | Mensagem em danger-ink, ligada por aria-describedby. | |
| ChoiceCard.value* | string | Valor desta opção. | |
| ChoiceCard.title* | ReactNode | A decisão, em uma linha. | |
| ChoiceCard.badge | ReactNode | Etiqueta "Mais barata" ou "Recomendada" com Badge. Nunca pílula. | |
| ChoiceCard.description | ReactNode | O que muda se escolher. | |
| ChoiceCard.footer | ReactNode | Total, prazo ou condição, separado por linha fina. | |
| ChoiceCard.icon | ReactNode | Marca do meio de pagamento ou do adicional. |
Acessibilidade#
Teclado
Leitor de tela
- —input radio ou checkbox nativo dentro de label. O cartão inteiro é o alvo.
- —Grupo inválido: aria-invalid e aria-describedby na mensagem.
Boas práticas#
Faça
- Mostre o total junto da parcela — a pessoa decide com os dois números.
- Ordene da condição mais barata para a mais longa.
Evite
- Pré-selecionar a opção mais cara.
- Esconder taxa no rodapé em corpo menor que 12.
Conteúdo#
- —Título com o número que decide: "12x R$ 223,04". Rodapé com o total: "Total R$ 2.676,48".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Entrada
Radio
Uma entre poucas. Círculo da mesma família do FilterChip single. fieldset + legend em rótulo de máquina.
Entrada
Checkbox
A mesma marca do FilterChip: papel com anel fino, azul preenchido com check branco. Independente ou em lote. Traço quando só alguns filhos estão marcados.
Dados
SummaryList
Resumo de uma decisão: rótulo à esquerda, valor tabular à direita, linha fina entre as duas. O total é a única linha que grita. Papel sozinho; flush dentro de outro cartão.
Superfície
Grid
1 a 6 colunas. Gap da escala (8 · 12 · 16 · 24 · 32) e os cortes da margem (md 768, xl 1280).