Studio Kit

Data Input

Choice Card

Escolha única estilo Typeform: cada opção é um cartão clicável com badge de letra, título e descrição. Construído sobre Radix RadioGroup — herda navegação por setas e semântica de radiogroup.

npx shadcn add @studio/choice-card

Qual cenário descreve melhor o seu momento hoje?

A Estou começando Preciso de uma presença profissional desde o início.
B Quero gerar contatos Transformar interesse em conversa ou agendamento.
C Minha presença ficou para trás Já tenho algo, mas não representa mais o meu nível.
D Quero usar IA / automação Uma solução mais inteligente no meu negócio.

Props

Prop Tipo Descrição
value string ChoiceCardGroup: valor selecionado (controlado)
onValueChange (value: string) => void ChoiceCardGroup: callback de seleção
optionKey string ChoiceCard: letra/atalho no badge (ex.: "A")
label ReactNode ChoiceCard: título da opção
description ReactNode ChoiceCard: texto auxiliar (opcional)
icon ReactNode ChoiceCard: ícone que substitui o badge da letra