Checkbox

Ripple UI comes with Checkbox component that can be used to capture user checkbox.

​

Default

Simple example of checkbox.

<div>
	<label class="flex cursor-pointer gap-2">
		<input type="checkbox" class="checkbox" />
		<span>Remember me?</span>
	</label>
</div>

​

Colors

Checkbox colors

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

​

Bordered

Checkbox bordered

<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

<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

<input type="checkbox" class="checkbox" disabled />
<input type="checkbox" class="checkbox" disabled checked />

​

API