Checkbox
Ripple UI comes with Checkbox component that can be used to capture user checkbox.
Default
Simple example of checkbox.
HTML
JSX
<div><label class="flex cursor-pointer gap-2"><input type="checkbox" class="checkbox" /><span>Remember me?</span></label></div>
Colors
Checkbox colors
HTML
JSX
<input type="checkbox" class="checkbox-primary checkbox" checked /><input type="checkbox" class="checkbox-secondary checkbox" checked /><input type="checkbox" class="checkbox-success checkbox" checked /><input type="checkbox" class="checkbox-warning checkbox" checked /><input type="checkbox" class="checkbox-error checkbox" checked />
Solid
Checkbox Solid
HTML
JSX
<input type="checkbox" class="checkbox checkbox-solid" /><input type="checkbox" class="checkbox-solid-secondary checkbox" /><input type="checkbox" class="checkbox-solid-success checkbox" /><input type="checkbox" class="checkbox-solid-warning checkbox" /><input type="checkbox" class="checkbox-solid-error checkbox" />
Bordered
Checkbox bordered
HTML
JSX
<input type="checkbox" class="checkbox checkbox-bordered-primary" /><input type="checkbox" class="checkbox checkbox-bordered-secondary" /><input type="checkbox" class="checkbox checkbox-bordered-success" /><input type="checkbox" class="checkbox checkbox-bordered-warning" /><input type="checkbox" class="checkbox checkbox-bordered-error" />
Sizes
Checkbox in different sizes
HTML
JSX
<input type="checkbox" class="checkbox checkbox-xs" checked /><input type="checkbox" class="checkbox checkbox-sm" checked /><input type="checkbox" class="checkbox checkbox-md" checked /><input type="checkbox" class="checkbox checkbox-lg" checked /><input type="checkbox" class="checkbox checkbox-xl" checked />
Disabled
Checkbox disabled
HTML
JSX
<input type="checkbox" class="checkbox" disabled /><input type="checkbox" class="checkbox" disabled checked />
API
| class | Description |
|---|---|
| checkbox | Checkbox base class |
| checkbox-primary | Set primary color |
| checkbox-secondary | Set secondary color |
| checkbox-success | Set success color |
| checkbox-error | Set error color |
| checkbox-warning | Set warning color |
| checkbox-solid | Set low gray background and primary color |
| checkbox-solid-secondary | Set low gray background and secondary color |
| checkbox-solid-success | Set low gray background and success color |
| checkbox-solid-error | Set low gray background and error color |
| checkbox-solid-warning | Set low gray background and warning color |
| checkbox-bordered-primary | With primary border by default |
| checkbox-bordered-secondary | With secondary border by default |
| checkbox-bordered-success | With success border by default |
| checkbox-bordered-error | With error border by default |
| checkbox-bordered-warning | With warning border by default |
| checkbox-xs | Set extra small size |
| checkbox-sm | Set small size |
| checkbox-md | Set medium size |
| checkbox-lg | Set large size |
| checkbox-xl | Set extra large size |