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 />
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-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 |