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

classDescription
checkboxCheckbox base class
checkbox-primarySet primary color
checkbox-secondarySet secondary color
checkbox-successSet success color
checkbox-errorSet error color
checkbox-warningSet warning color
checkbox-solidSet low gray background and primary color
checkbox-solid-secondarySet low gray background and secondary color
checkbox-solid-successSet low gray background and success color
checkbox-solid-errorSet low gray background and error color
checkbox-solid-warningSet low gray background and warning color
checkbox-bordered-primaryWith primary border by default
checkbox-bordered-secondaryWith secondary border by default
checkbox-bordered-successWith success border by default
checkbox-bordered-errorWith error border by default
checkbox-bordered-warningWith warning border by default
checkbox-xsSet extra small size
checkbox-smSet small size
checkbox-mdSet medium size
checkbox-lgSet large size
checkbox-xlSet extra large size