Radio buttons allow the user to select one option from a set.
| Class name | Type | |
|---|---|---|
| radio | Component | For radio input |
| radio-neutral | Color | neutral color |
| radio-primary | Color | primary color |
| radio-secondary | Color | secondary color |
| radio-accent | Color | accent color |
| radio-success | Color | success color |
| radio-warning | Color | warning color |
| radio-info | Color | info color |
| radio-error | Color | error color |
| radio-xs | Size | Extra small size |
| radio-sm | Size | Small size |
| radio-md | Size | Medium size [Default] |
| radio-lg | Size | Large size |
| radio-xl | Size | Extra large size |
Each set of radio inputs should have unique
nameattributes to avoid conflicts with other sets of radio inputs on the same page.
<input type="radio" name="radio-1" class="$$radio" checked="checked" />
<input type="radio" name="radio-1" class="$$radio" /><input type="radio" name="radio-1" class="$$radio" checked="checked" />
<input type="radio" name="radio-1" class="$$radio" /><input type="radio" name="radio-2" class="$$radio $$radio-xs" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-sm" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-md" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-lg" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-xl" checked="checked" /><input type="radio" name="radio-2" class="$$radio $$radio-xs" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-sm" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-md" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-lg" checked="checked" />
<input type="radio" name="radio-2" class="$$radio $$radio-xl" checked="checked" /><input type="radio" name="radio-3" class="$$radio $$radio-neutral" checked="checked" />
<input type="radio" name="radio-3" class="$$radio $$radio-neutral" /><input type="radio" name="radio-3" class="$$radio $$radio-neutral" checked="checked" />
<input type="radio" name="radio-3" class="$$radio $$radio-neutral" /><input type="radio" name="radio-4" class="$$radio $$radio-primary" checked="checked" />
<input type="radio" name="radio-4" class="$$radio $$radio-primary" /><input type="radio" name="radio-4" class="$$radio $$radio-primary" checked="checked" />
<input type="radio" name="radio-4" class="$$radio $$radio-primary" /><input type="radio" name="radio-5" class="$$radio $$radio-secondary" checked="checked" />
<input type="radio" name="radio-5" class="$$radio $$radio-secondary" /><input type="radio" name="radio-5" class="$$radio $$radio-secondary" checked="checked" />
<input type="radio" name="radio-5" class="$$radio $$radio-secondary" /><input type="radio" name="radio-6" class="$$radio $$radio-accent" checked="checked" />
<input type="radio" name="radio-6" class="$$radio $$radio-accent" /><input type="radio" name="radio-6" class="$$radio $$radio-accent" checked="checked" />
<input type="radio" name="radio-6" class="$$radio $$radio-accent" /><input type="radio" name="radio-7" class="$$radio $$radio-success" checked="checked" />
<input type="radio" name="radio-7" class="$$radio $$radio-success" /><input type="radio" name="radio-7" class="$$radio $$radio-success" checked="checked" />
<input type="radio" name="radio-7" class="$$radio $$radio-success" /><input type="radio" name="radio-8" class="$$radio $$radio-warning" checked="checked" />
<input type="radio" name="radio-8" class="$$radio $$radio-warning" /><input type="radio" name="radio-8" class="$$radio $$radio-warning" checked="checked" />
<input type="radio" name="radio-8" class="$$radio $$radio-warning" /><input type="radio" name="radio-9" class="$$radio $$radio-info" checked="checked" />
<input type="radio" name="radio-9" class="$$radio $$radio-info" /><input type="radio" name="radio-9" class="$$radio $$radio-info" checked="checked" />
<input type="radio" name="radio-9" class="$$radio $$radio-info" /><input type="radio" name="radio-10" class="$$radio $$radio-error" checked="checked" />
<input type="radio" name="radio-10" class="$$radio $$radio-error" /><input type="radio" name="radio-10" class="$$radio $$radio-error" checked="checked" />
<input type="radio" name="radio-10" class="$$radio $$radio-error" /><input type="radio" name="radio-11" class="$$radio" disabled checked="checked" />
<input type="radio" name="radio-11" class="$$radio" disabled /><input type="radio" name="radio-11" class="$$radio" disabled checked="checked" />
<input type="radio" name="radio-11" class="$$radio" disabled /><input
type="radio" name="radio-12" checked="checked"
class="$$radio bg-red-100 border-red-300 checked:bg-red-200 checked:text-red-600 checked:border-red-600" />
<input
type="radio" name="radio-12" checked="checked"
class="$$radio bg-blue-100 border-blue-300 checked:bg-blue-200 checked:text-blue-600 checked:border-blue-600" /><input
type="radio" name="radio-12" checked="checked"
class="$$radio bg-red-100 border-red-300 checked:bg-red-200 checked:text-red-600 checked:border-red-600" />
<input
type="radio" name="radio-12" checked="checked"
class="$$radio bg-blue-100 border-blue-300 checked:bg-blue-200 checked:text-blue-600 checked:border-blue-600" />