Radio Component
A fully accessible radio button component built with native HTML inputs and Tailwind CSS. Enable single-choice selection with custom styling, multiple sizes, and color variants. Supports grouped radio sets, disabled states, and label integration for accessible, theme-aware form controls.
Radio button components allow users to select exactly one option from a set of mutually exclusive choices. Built with native HTML input elements and enhanced with Tailwind CSS, radio buttons support multiple sizes, colors, and states. Accessible and keyboard-navigable, radios are ideal for preference selection, filtering, and single-choice form questions.
| Class | Type | Description |
|---|---|---|
| radio | Base | Styled radio button input |
| radio-circle | Style | Fully circular radio (default) |
| radio-rounded | Style | Moderately rounded radio |
| radio-square | Style | Square radio with no rounding |
| radio-disabled | Modifier | Disabled appearance for non-input elements |
| radio-xs | Size | Extra small |
| radio-sm | Size | Small |
| radio-md | Size | Medium (default) |
| radio-lg | Size | Large |
| radio-xl | Size | Extra large |
| radio-2xl | Size | 2× extra large |
| radio-primary | Color | Primary theme color |
| radio-secondary | Color | Secondary theme color |
| radio-accent | Color | Accent theme color |
| radio-neutral | Color | Neutral theme color |
| radio-info | Color | Info semantic color |
| radio-success | Color | Success semantic color |
| radio-warning | Color | Warning semantic color |
| radio-error | Color | Error semantic color |
Basic Usage
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"> |
Radio Sizes
html
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"> |
Radio Colors
html
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"> |
Disabled radio
html
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
Radio Shapes
Square Radio
html
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
Rounded or Circle Radio
html
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 with label
html
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> |