---
title: Checkboxes & Tickboxes
section-title: UI Components
docs: true

navgroup: styleguide
navsub: ui-components
navactive: checkboxes
---
<h2 class="sg-sectionHeading">Checkboxes column</h2>
<p>Multiple selection inputs displaying the selected inputs as crosses</p>
{{#>demo-block }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 1' inputid='checkbox1Column' name='sortbyColumn' value='checkbox1' }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 2' inputid='checkbox2Column' name='sortbyColumn' value='checkbox2' }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 3' inputid='checkbox3Column' name='sortbyColumn' value='checkbox3' }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 4' inputid='checkbox4Column' name='sortbyColumn' value='checkbox4' }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 5' inputid='checkbox5Column' name='sortbyColumn' value='checkbox5' }}
{{/demo-block }}

<h2 class="sg-sectionHeading">Checkboxes inline</h2>
{{#>demo-block }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 1' inputid='checkbox1Inline' name='sortbyInline' value='checkbox1' isInline=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 2' inputid='checkbox2Inline' name='sortbyInline' value='checkbox2' isInline=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 3' inputid='checkbox3Inline' name='sortbyInline' value='checkbox3' isInline=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 4' inputid='checkbox4Inline' name='sortbyInline' value='checkbox4' isInline=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 5' inputid='checkbox5Inline' name='sortbyInline' value='checkbox5' isInline=true }}
{{/demo-block }}

<h2 class="sg-sectionHeading">Checkboxes column & disabled</h2>
{{#>demo-block }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 1' inputid='checkbox1ColumnDisabled' name='sortbyColumnDisabled' value='checkbox1' isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 2' inputid='checkbox2ColumnDisabled' name='sortbyColumnDisabled' value='checkbox2' isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 3' inputid='checkbox3ColumnDisabled' name='sortbyColumnDisabled' value='checkbox3' isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 4' inputid='checkbox4ColumnDisabled' name='sortbyColumnDisabled' value='checkbox4' isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 5' inputid='checkbox5ColumnDisabled' name='sortbyColumnDisabled' value='checkbox5' isDisabled=true }}
{{/demo-block }}

<h2 class="sg-sectionHeading">Checkboxes inline & disabled</h2>
{{#>demo-block }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 1' inputid='checkbox1InlineDisabled' name='sortbyInlineDisabled' value='checkbox1' isInline=true isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 2' inputid='checkbox2InlineDisabled' name='sortbyInlineDisabled' value='checkbox2' isInline=true isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 3' inputid='checkbox3InlineDisabled' name='sortbyInlineDisabled' value='checkbox3' isInline=true isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 4' inputid='checkbox4InlineDisabled' name='sortbyInlineDisabled' value='checkbox4' isInline=true isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--checkbox' labeltext='Checkbox 5' inputid='checkbox5InlineDisabled' name='sortbyInlineDisabled' value='checkbox5' isInline=true isDisabled=true }}
{{/demo-block }}

<h2 class="sg-sectionHeading">Tickboxes column</h2>
<p>Multiple selection inputs displaying the selected inputs as ticks</p>
{{#>demo-block }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 1' inputid='tickbox1Column' name='sortbyColumn' value='tickbox1' }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 2' inputid='tickbox2Column' name='sortbyColumn' value='tickbox2' }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 3' inputid='tickbox3Column' name='sortbyColumn' value='tickbox3' }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 4' inputid='tickbox4Column' name='sortbyColumn' value='tickbox4' }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 5' inputid='tickbox5Column' name='sortbyColumn' value='tickbox5' }}
{{/demo-block }}

<h2 class="sg-sectionHeading">Tickboxes inline</h2>
{{#>demo-block }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 1' inputid='tickbox1Inline' name='sortbyInline' value='tickbox1' isInline=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 2' inputid='tickbox2Inline' name='sortbyInline' value='tickbox2' isInline=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 3' inputid='tickbox3Inline' name='sortbyInline' value='tickbox3' isInline=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 4' inputid='tickbox4Inline' name='sortbyInline' value='tickbox4' isInline=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 5' inputid='tickbox5Inline' name='sortbyInline' value='tickbox5' isInline=true }}
{{/demo-block }}

<h2 class="sg-sectionHeading">Tickboxes column & disabled</h2>
{{#>demo-block }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 1' inputid='tickbox1ColumnDisabled' name='sortbyColumnDisabled' value='tickbox1' isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 2' inputid='tickbox2ColumnDisabled' name='sortbyColumnDisabled' value='tickbox2' isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 3' inputid='tickbox3ColumnDisabled' name='sortbyColumnDisabled' value='tickbox3' isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 4' inputid='tickbox4ColumnDisabled' name='sortbyColumnDisabled' value='tickbox4' isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 5' inputid='tickbox5ColumnDisabled' name='sortbyColumnDisabled' value='tickbox5' isDisabled=true }}
{{/demo-block }}

<h2 class="sg-sectionHeading">Tickboxes inline & disabled</h2>
{{#>demo-block }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 1' inputid='tickbox1InlineDisabled' name='sortbyInlineDisabled' value='tickbox1' isInline=true isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 2' inputid='tickbox2InlineDisabled' name='sortbyInlineDisabled' value='tickbox2' isInline=true isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 3' inputid='tickbox3InlineDisabled' name='sortbyInlineDisabled' value='tickbox3' isInline=true isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 4' inputid='tickbox4InlineDisabled' name='sortbyInlineDisabled' value='tickbox4' isInline=true isDisabled=true }}
  {{> je-input-formControl type='checkbox' typeclass='o-formControl-indicator--tickbox' labeltext='Tickbox 5' inputid='tickbox5InlineDisabled' name='sortbyInlineDisabled' value='tickbox5' isInline=true isDisabled=true }}
{{/demo-block }}