Checkboxes are used to toggle binary options or properties. Although switches are typically preferred for on/off states, checkboxes can be more appropriate when multiple selections or partial states are involved.
<div class="flex-row" style="gap: 12px; height: 40px; padding: 0px 12px;">
<div class="flexy-checkbox">
<input type="checkbox" id="checkbox-eg-1" />
<div class="flexy-checkbox__box"></div>
</div>
<label for="checkbox-eg-1" style="line-height: 40px;">Stereo sound</label>
</div>
To render a checkbox as selected by default, add the checked attribute to the <input> element.
<div class="flex-row" style="gap: 12px; height: 40px; padding: 0px 12px;">
<div class="flexy-checkbox">
<input type="checkbox" id="checkbox-eg-2" checked />
<div class="flexy-checkbox__box"></div>
</div>
<label for="checkbox-eg-2" style="line-height: 40px;">Data saving</label>
</div>
To render a checkbox as non-interactive, add the disabled attribute to the <input> element.
<div class="flex-column">
<div class="flex-row" style="gap: 12px; height: 40px; padding: 0px 12px;">
<div class="flexy-checkbox">
<input type="checkbox" id="checkbox-eg-3" disabled />
<div class="flexy-checkbox__box"></div>
</div>
<label for="checkbox-eg-3" style="line-height: 40px;"
>Read permission</label
>
</div>
<div class="flex-row" style="gap: 12px; height: 40px; padding: 0px 12px;">
<div class="flexy-checkbox">
<input type="checkbox" id="checkbox-eg-4" checked disabled />
<div class="flexy-checkbox__box"></div>
</div>
<label for="checkbox-eg-4" style="line-height: 40px;"
>Write permission</label
>
</div>
</div>
To render a checkbox in an indeterminate (partially selected) state, define its related child checkboxes using the aria-controls attribute.
The value of aria-controls should be a space-separated list of the child checkbox IDs.
<style>
.checkbox-example-indeterminate .flex-row {
gap: 12px;
height: 40px;
}
.checkbox-example-indeterminate ul {
list-style: none;
margin: 8px 0px;
}
.checkbox-example-indeterminate label {
line-height: 40px;
}
</style>
<div class="checkbox-example-indeterminate">
<div class="flex-row">
<div class="flexy-checkbox">
<input
type="checkbox"
id="recv-noti"
aria-controls="recv-noti-daily recv-noti-weekly recv-noti-monthly"
/>
<div class="flexy-checkbox__box"></div>
</div>
<label for="recv-noti">Receive Notification</label>
</div>
<ul>
<li>
<div class="flex-row">
<div class="flexy-checkbox">
<input type="checkbox" id="recv-noti-daily" />
<div class="flexy-checkbox__box"></div>
</div>
<label for="recv-noti-daily">Daily</label>
</div>
</li>
<li>
<div class="flex-row">
<div class="flexy-checkbox">
<input type="checkbox" id="recv-noti-weekly" />
<div class="flexy-checkbox__box"></div>
</div>
<label for="recv-noti-weekly">Weekly</label>
</div>
</li>
<li>
<div class="flex-row">
<div class="flexy-checkbox">
<input type="checkbox" id="recv-noti-monthly" />
<div class="flexy-checkbox__box"></div>
</div>
<label for="recv-noti-monthly">Monthly</label>
</div>
</li>
</ul>
</div>
flexy-checkboxsizeoutline-widthmark-colormark-sizeunselected-fill-colorunselected-outline-colorunselected-hovered-outline-colorselected-fill-colorselected-outline-colorstate-transition-durationstate-transition-easingLast modified: Oct 19, 2025: refactor(docs): Reorganize the folder structure of component examples (8271c2e)