Checkbox - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

Apple

<label class="ts-checkbox">
    <input type="checkbox" checked />
    Apple
</label>

States

Disabled

A checkbox can show it's currently disabled.

Remember my password

<label class="ts-checkbox">
    <input type="checkbox" disabled />
    Remember my password
</label>

Indeterminate

A checkbox can be indeterminate.

All Files

Video Document Music

<label class="ts-checkbox is-indeterminate">
    <input type="checkbox" checked />
    All Files
</label>
<div class="ts-content is-dense">
    <div class="ts-wrap is-vertical is-compact">
        <label class="ts-checkbox">
            <input type="checkbox" checked />
            Video
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" />
            Document
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" checked />
            Music
        </label>
    </div>
</div>

Variations

Negative

A checkbox can show it's in an invalid state.

I agree to the terms of use.

<label class="ts-checkbox is-negative">
    <input type="checkbox" />
    I agree to the terms of use.
</label>

Solo

A checkbox can have no extra spacing without label text.

<label class="ts-checkbox is-solo">
    <input type="checkbox" />
</label>

Sizes

A checkbox can have different sizes.

Small Checkbox

Default Checkbox

Large Checkbox

<label class="ts-checkbox is-small">
    <input type="checkbox" checked />
    Small Checkbox
</label>
<label class="ts-checkbox">
    <input type="checkbox" />
    Default Checkbox
</label>
<label class="ts-checkbox is-large">
    <input type="checkbox" />
    Large Checkbox
</label>

Compositions

Checkboxes

Wrap can arrange checkboxes horizontally or vertically.

Status

Sold For Sale Air-drop

Elements

Fire Water Earth

<div class="ts-wrap is-vertical">
    <div class="ts-text is-label">Status</div>
    <div class="ts-wrap">
        <label class="ts-checkbox">
            <input type="checkbox" checked />
            Sold
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" />
            For Sale
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" />
            Air-drop
        </label>
    </div>
    <div class="ts-text is-label">Elements</div>
    <div class="ts-wrap is-vertical is-compact">
        <label class="ts-checkbox">
            <input type="checkbox" checked />
            Fire
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" />
            Water
        </label>
        <label class="ts-checkbox">
            <input type="checkbox" />
            Earth
        </label>
    </div>
</div>

Looking for similar components?