Skip to main content

Checkbox

States​

Default​

Result
Loading...
Live Editor
<span class="tf-checkbox">
    <input type="checkbox" id="checkbox-state-default" />
    <label for="checkbox-state-default" class="tf-checkbox__label">
        <span class="tf-checkbox__faux"></span>
        <span class="tf-checkbox__label-text">Checkbox Label</span>
    </label>
</span>

Error​

Result
Loading...
Live Editor
<div class="tf-has-error">
    <span class="tf-checkbox">
        <input type="checkbox" id="checkbox-state-error" />
        <label for="checkbox-state-error" class="tf-checkbox__label">
            <span class="tf-checkbox__faux"></span>
            <span class="tf-checkbox__label-text">Checkbox Label</span>
        </label>
    </span>
</div>

Disabled​

Result
Loading...
Live Editor
<div>
    <span class="tf-checkbox">
        <input type="checkbox" id="checkbox-state-disabled-1" disabled />
        <label for="checkbox-state-disabled-1" class="tf-checkbox__label">
            <span class="tf-checkbox__faux"></span>
            <span class="tf-checkbox__label-text">Checkbox Label</span>
        </label>
    </span>

    <span class="tf-checkbox">
        <input type="checkbox" id="checkbox-state-disabled-2" disabled checked />
        <label for="checkbox-state-disabled-2" class="tf-checkbox__label">
            <span class="tf-checkbox__faux"></span>
            <span class="tf-checkbox__label-text">Checkbox Label</span>
        </label>
    </span>
</div>

Examples​

Multiple​

Result
Loading...
Live Editor
<div>
    <span class="tf-checkbox">
        <input type="checkbox" id="checkbox-example-multiple-1" />
        <label for="checkbox-example-multiple-1" class="tf-checkbox__label">
            <span class="tf-checkbox__faux"></span>
            <span class="tf-checkbox__label-text">Checkbox Label</span>
        </label>
    </span>
    <span class="tf-checkbox">
        <input type="checkbox" id="checkbox-example-multiple-2" />
        <label for="checkbox-example-multiple-2" class="tf-checkbox__label">
            <span class="tf-checkbox__faux"></span>
            <span class="tf-checkbox__label-text">Checkbox Label</span>
        </label>
    </span>
</div>

Multi-line Label​

Result
Loading...
Live Editor
<div>
    <span class="tf-checkbox">
        <input type="checkbox" id="checkbox-example-multiline-1" />
        <label for="checkbox-example-multiline-1" class="tf-checkbox__label">
            <span class="tf-checkbox__faux"></span>
            <span class="tf-checkbox__label-text">
                Checkbox Label<br />
                with multiple lines
            </span>
        </label>
    </span>
    <span class="tf-checkbox">
        <input type="checkbox" id="checkbox-example-multiline-2" />
        <label for="checkbox-example-multiline-2" class="tf-checkbox__label">
            <span class="tf-checkbox__faux"></span>
            <span class="tf-checkbox__label-text">
                Checkbox Label<br />
                with multiple lines
            </span>
        </label>
    </span>
</div>