Radio
Ripple UI comes with Radio component.
Default
Simple example of Radio.
HTML
JSX
<label class="flex cursor-pointer gap-2"><input type="radio" class="radio" /><span>Remember me?</span></label>
Colors
Radio colors.
HTML
JSX
<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
Radio Solid.
HTML
JSX
<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
Radio bordered.
HTML
JSX
<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" />
Sizes
Radio in different sizes.
HTML
JSX
<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 />
Radio Group
Radio Group.
HTML
JSX
<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
Radio disabled.
HTML
JSX
<input type="radio" class="radio" disabled /><input type="radio" class="radio" disabled checked />
API
| class | 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 |