Checkbox

Checkboxes are form elements that allow users to select one or more items from multiple options. AsagaoUI provides an implementation focused on accessibility and usability.

Label

<label class="checkbox">
    <input class="checkbox-input" type="checkbox">
    Label
</label>

Sizes

You can change the size of the checkbox by adding is-sm, is-md, or is-lg classes.

sm Default size
md
lg

lg size md size sm size

<label class="checkbox is-lg">
    <input class="checkbox-input" type="checkbox">
    lg size
</label>
<label class="checkbox is-md">
    <input class="checkbox-input" type="checkbox">
    md size
</label>
<label class="checkbox is-sm">
    <input class="checkbox-input" type="checkbox">
    sm size
</label>

Example

An example using form-group, which makes error display concise.

Tokyo 23 Wards * Required

Please select all applicable wards.

Adachi Arakawa Itabashi Edogawa

<div class="form-group">
    <label for="test" class="form-label">
        Tokyo 23 Wards
        <span class="form-necessity">* Required</span>
    </label>
    <div class="form-support">Please select all applicable wards.</div>
    <div>
        <label class="checkbox">
            <input class="checkbox-input" type="checkbox">
            Adachi
        </label>
        <label class="checkbox">
            <input class="checkbox-input" type="checkbox">
            Arakawa
        </label>
        <label class="checkbox">
            <input class="checkbox-input" type="checkbox">
            Itabashi
        </label>
        <label class="checkbox">
            <input class="checkbox-input" type="checkbox">
            Edogawa
        </label>
    </div>
</div>