Checkbox The Checkbox component is used for selecting one or multiple options from a list. It is a standard form element that supports different sizes and brand colors. You can use it with a label for better accessibility. It handles checked, unchecked, and indeterminate states for complex UI needs.
Basic Usage
Copy Code
<input type="checkbox" checked="checked" class="checkbox">Checkbox Sizes
Copy Code
<input type="checkbox" checked="checked" class="checkbox checkbox-xs">
<input type="checkbox" checked="checked" class="checkbox checkbox-sm">
<input type="checkbox" checked="checked" class="checkbox checkbox-md">
<input type="checkbox" checked="checked" class="checkbox checkbox-lg">
<input type="checkbox" checked="checked" class="checkbox checkbox-xl">Checkbox Colors
Copy Code
<input type="checkbox" checked="checked" class="checkbox">
<input type="checkbox" checked="checked" class="checkbox checkbox-primary">
<input type="checkbox" checked="checked" class="checkbox checkbox-secondary">
<input type="checkbox" checked="checked" class="checkbox checkbox-accent">
<input type="checkbox" checked="checked" class="checkbox checkbox-info">
<input type="checkbox" checked="checked" class="checkbox checkbox-success">
<input type="checkbox" checked="checked" class="checkbox checkbox-warning">
<input type="checkbox" checked="checked" class="checkbox checkbox-error">
<input type="checkbox" checked="checked" class="checkbox checkbox-neutral">Disabled Checkboxs
Copy Code
<input type="checkbox" class="checkbox" disabled="">
<input type="checkbox" class="checkbox" disabled="" checked="checked">Checkbox Shapes Square Checkbox
Copy Code
<input type="checkbox" class="checkbox checkbox-square" checked="checked">Circle / Rounded Checkbox The checkbox-circle and checkbox-rounded both classes result in the same visual style, allowing for flexible naming conventions.
Copy Code
<input type="checkbox" class="checkbox checkbox-circle" checked="checked">
<input type="checkbox" class="checkbox checkbox-rounded" checked="checked">Checkboxs With Labels
Copy Code
<input type="checkbox" class="checkbox checkbox-circle checkbox-sm" id="newsletter" name="newsletter" checked="checked">
<label for="newsletter">Subscribe to our newsletter</label>