<label class="checkbox">
<input type="checkbox" class="checkbox-input"/><span class="checkbox-label">Checkbox label</span>
</label>
label.checkbox
input.checkbox-input(type='checkbox')
span.checkbox-label Checkbox label
<label class="checkbox is-tiny">
<input type="checkbox" class="checkbox-input"/><span class="checkbox-label">is-tiny</span>
</label>
<label class="checkbox is-small">
<input type="checkbox" class="checkbox-input"/><span class="checkbox-label">is-small</span>
</label>
<label class="checkbox is-normal">
<input type="checkbox" class="checkbox-input"/><span class="checkbox-label">is-normal</span>
</label>
<label class="checkbox is-large">
<input type="checkbox" class="checkbox-input"/><span class="checkbox-label">is-large</span>
</label>
<label class="checkbox is-massive">
<input type="checkbox" class="checkbox-input"/><span class="checkbox-label">is-massive</span>
</label>
label.checkbox.is-tiny
input.checkbox-input(type='checkbox')
span.checkbox-label is-tiny
label.checkbox.is-small
input.checkbox-input(type='checkbox')
span.checkbox-label is-small
label.checkbox.is-normal
input.checkbox-input(type='checkbox')
span.checkbox-label is-normal
label.checkbox.is-large
input.checkbox-input(type='checkbox')
span.checkbox-label is-large
label.checkbox.is-massive
input.checkbox-input(type='checkbox')
span.checkbox-label is-massive
<label class="checkbox is-inline">
<input type="checkbox" class="checkbox-input"/><span class="checkbox-label">is-inline</span>
</label>
<label class="checkbox is-inline">
<input type="checkbox" class="checkbox-input"/><span class="checkbox-label">is-inline</span>
</label>
<label class="checkbox is-inline">
<input type="checkbox" class="checkbox-input"/><span class="checkbox-label">is-inline</span>
</label>
<label class="checkbox is-inline">
<input type="checkbox" class="checkbox-input"/><span class="checkbox-label">is-inline</span>
</label>
label.checkbox.is-inline
input.checkbox-input(type='checkbox')
span.checkbox-label is-inline
label.checkbox.is-inline
input.checkbox-input(type='checkbox')
span.checkbox-label is-inline
label.checkbox.is-inline
input.checkbox-input(type='checkbox')
span.checkbox-label is-inline
label.checkbox.is-inline
input.checkbox-input(type='checkbox')
span.checkbox-label is-inline
<input value="is-disabled" type="text" disabled="disabled" class="input is-disabled"/>
input.input.is-disabled(value="is-disabled", type="text", disabled)
Modifier | Description | Class |
---|---|---|
Size | changes the element size based on font-size | .is-tiny .is-small .is-normal .is-large .is-massive |
inline | make checkbox inline | .is-inline |
Disabled | indicates that a checkbox is disabled, equivalent to `checkbox[disabled]` | .is-disabled |