Checkbox

Description

The checkbox component uses characteres to represents checked or not-checked input. To group checkboxes, you can use a fieldset. Check the Fieldset page for more details about group fieldsets.

Code Examples

These are some examples for component:

Note: The checkbox html structure needs to be followed to works. The style will not be applied if the class was used in the input element only.

<!-- Default -->
<label class="tui-checkbox">Default
    <input type="checkbox" />
    <span></span>
</label>

<!-- Checked -->
<label class="tui-checkbox">Checked
    <input type="checkbox" checked />
    <span></span>
</label>

<!-- Fieldset Group -->
<fieldset class="tui-input-fieldset">
    <label class="tui-checkbox">Checkbox
        <input type="checkbox"/>
        <span></span>
    </label>
</fieldset>

Component Classes

This is the table with available classes for this component.

Class	Description
.tui-checkbox	Creates a checkbox component