Botões de opção Tailwind CSS somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs-xl. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Os componentes do botão de opção permitem que os usuários selecionem exatamente uma opção em um conjunto de opções mutuamente exclusivas. Construídos com elementos de entrada HTML nativos e aprimorados com Tailwind CSS, os botões de opção suportam vários tamanhos, cores e estados. Acessíveis e navegáveis por teclado, os rádios são ideais para seleção de preferências, filtragem e perguntas de escolha única.
Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.
| Aula | Tipo | Descrição |
|---|---|---|
| radio | Base | Entrada de botão de opção estilizada |
| radio-circle | Estilo | Rádio totalmente circular (padrão) |
| radio-rounded | Estilo | Rádio moderadamente arredondado |
| radio-square | Estilo | Rádio quadrado sem arredondamento |
| radio-disabled | Modificador | Aparência desativada para elementos sem entrada |
| radio-xs | Tamanho | Extra pequeno |
| radio-sm | Tamanho | Pequeno |
| radio-md | Tamanho | Médio (padrão) |
| radio-lg | Tamanho | Grande |
| radio-xl | Tamanho | Extra grande |
| radio-2xl | Tamanho | 2× extra grande |
| radio-primary | Cor | Cor do tema principal |
| radio-secondary | Cor | Cor do tema secundário |
| radio-accent | Cor | Cor do tema de destaque |
| radio-neutral | Cor | Cor neutra do tema |
| radio-info | Cor | Cor semântica da informação |
| radio-success | Cor | Cor semântica de sucesso |
| radio-warning | Cor | Cor semântica de aviso |
| radio-error | Cor | Cor semântica do erro |
Uso Básico
1 2 | <input type="radio" name="radio-1" class="radio" checked="checked"> <input type="radio" name="radio-1" class="radio"> |
1 2 | <input type="radio" name="radio-1" className="radio" checked="checked"> <input type="radio" name="radio-1" className="radio"> |
Tamanhos de rádio
1 2 3 4 5 | <input type="radio" name="radio-sizes" class="radio radio-xs" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-sm" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-md" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-lg" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-xl" checked="checked"> |
Cores do rádio
1 2 3 4 5 6 7 8 9 | <input type="radio" name="radio-colors" class="radio" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-primary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-secondary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-accent" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-info" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-success" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-warning" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-error" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-neutral" checked="checked"> |
Rádio desativado
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
Formas de rádio
Rádio Quadrada
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
Rádio arredondado ou circular
1 2 | <input type="radio" name="shape-demo2" class="radio radio-circle" checked="checked"> <input type="radio" name="shape-demo2" class="radio radio-rounded" checked="checked"> |
Rádio com etiqueta
1 2 3 4 5 6 7 8 | <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-small" name="size" value="small"> <label for="size-small">Small</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-medium" name="size" value="medium"> <label for="size-medium">Medium</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-large" name="size" value="large"> <label for="size-large">Large</label> |
Usando Claude Code, Cursor ou outro editor de IA?
Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Rádio e a estrutura sob demanda. Chega de aulas alucinadas.