Radio
Classes Information
| ClassName | Description |
|---|---|
| radio | Radio base class |
| radio-primary | Set primary color |
| radio-secondary | Set secondary color |
| radio-success | Set success color |
| radio-error | Set error color |
| radio-warning | Set warning color |
| radio-solid | Set low gray background and primary color |
| radio-solid-secondary | Set low gray background and secondary color |
| radio-solid-success | Set low gray background and success color |
| radio-solid-error | Set low gray background and error color |
| radio-solid-warning | Set low gray background and warning color |
| radio-bordered-primary | With primary border by default |
| radio-bordered-secondary | With secondary border by default |
| radio-bordered-success | With success border by default |
| radio-bordered-error | With error border by default |
| radio-bordered-warning | With warning border by default |
| radio-xs | Set extra small size |
| radio-sm | Set small size |
| radio-md | Set medium size |
| radio-lg | Set large size |
| radio-xl | Set extra large size |
Basic Usage
Example Code
html
<label class="flex cursor-pointer gap-2">
<input type="radio" class="radio" />
<span>Remember me?</span>
</label>Sizes
Example Code
html
<input type="radio" class="radio radio-xs" checked />
<input type="radio" class="radio radio-sm" checked />
<input type="radio" class="radio radio-md" checked />
<input type="radio" class="radio radio-lg" checked />
<input type="radio" class="radio radio-xl" checked />Colors
Example Code
html
<input type="radio" class="radio-primary radio" checked />
<input type="radio" class="radio-secondary radio" checked />
<input type="radio" class="radio-success radio" checked />
<input type="radio" class="radio-warning radio" checked />
<input type="radio" class="radio-error radio" checked />Solid
Example Code
html
<input type="radio" class="radio-solid radio" />
<input type="radio" class="radio-solid-secondary radio" />
<input type="radio" class="radio-solid-success radio" />
<input type="radio" class="radio-solid-warning radio" />
<input type="radio" class="radio-solid-error radio" />Bordered
Example Code
html
<input type="radio" class="radio radio-bordered-primary" />
<input type="radio" class="radio radio-bordered-secondary" />
<input type="radio" class="radio radio-bordered-success" />
<input type="radio" class="radio radio-bordered-warning" />
<input type="radio" class="radio radio-bordered-error" />Group
Example Code
html
<div id="group1" class="flex flex-row gap-3">
<input type="radio" class="radio" name="group1" />
<input type="radio" class="radio" name="group1" />
<input type="radio" class="radio" name="group1" />
</div>Disabled
Example Code
html
<input type="radio" class="radio" disabled />
<input type="radio" class="radio" disabled checked />