Botones de opción CSS de Tailwind solo para CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs-xl. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Los componentes del botón de opción permiten a los usuarios seleccionar exactamente una opción de un conjunto de opciones mutuamente excluyentes. Construidos con elementos de entrada HTML nativos y mejorados con Tailwind CSS, los botones de opción admiten múltiples tamaños, colores y estados. Las radios, accesibles y navegables mediante teclado, son ideales para seleccionar preferencias, filtrar y formular preguntas de opción única.
Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.
| Clase | Tipo | Descripción |
|---|---|---|
| radio | Base | Entrada de botón de opción con estilo |
| radio-circle | Estilo | Radio completamente circular (predeterminado) |
| radio-rounded | Estilo | Radio moderadamente redondeada |
| radio-square | Estilo | Radio cuadrada sin redondeo. |
| radio-disabled | Modificador | Apariencia deshabilitada para elementos que no son de entrada |
| radio-xs | Tamaño | extrapequeño |
| radio-sm | Tamaño | Pequeño |
| radio-md | Tamaño | Medio (predeterminado) |
| radio-lg | Tamaño | Grande |
| radio-xl | Tamaño | Extra grande |
| radio-2xl | Tamaño | 2× extra grande |
| radio-primary | Color | Color del tema principal |
| radio-secondary | Color | Color del tema secundario |
| radio-accent | Color | Color del tema de acento |
| radio-neutral | Color | Color de tema neutro |
| radio-info | Color | Color semántico de información |
| radio-success | Color | Color semántico del éxito |
| radio-warning | Color | Color semántico de advertencia |
| radio-error | Color | Color semántico del error |
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"> |
Tamaños de radio
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"> |
Colores de radio
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"> |
Radio discapacitada
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
Formas de radio
Radio Cuadrada
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
Radio redondeada o 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"> |
radio con 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 u otro editor de IA?
Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Radio según sea necesario. No más clases alucinadas.