This website requires JavaScript to deliver the best possible experience.

Checkbox

    <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)
          ModifierDescriptionClass
          Sizechanges the element size based on font-size

          .is-tiny

          .is-small

          .is-normal

          .is-large

          .is-massive

          inlinemake checkbox inline.is-inline
          Disabledindicates that a checkbox is disabled, equivalent to `checkbox[disabled]`.is-disabled