Design System

Checkbox

Checkboxes are used to let users select 1 or more options on a form.

When to use this component

Use checkboxes when you need to help users:

  • select more than 1 option from a list
  • toggle a single option on or off

When not to use this component

Do not use the checkboxes component if users can only choose 1 option from a selection. In this case, use a radio.

Variations

Minimal checkbox

open this example in its own window 

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="yes" id="ds-id-0" />
  <label class="form-check-label" for="ds-id-0"
    >I want to receive the NIHR newsletter</label
  >
</div>

Options to the checkbox() macro

label: string

The human-readable button label.

value: string

The checkbox's value.

required: boolean = false

Whether the checkbox is required.

checked: boolean

Whether the checkbox is checked.

disabled: boolean = false

Whether the checkbox must be disabled.

invalid: boolean = false

Whether the checkbox's state is valid.

id: string|null = null

The element's ID.

{% from 'macros/component/checkbox.html' import checkbox %}

{{ checkbox({
  'label': 'I want to receive the NIHR newsletter',
  'value': 'yes'
}) }}

Required checkbox

open this example in its own window 

<div class="form-check">
  <input
    class="form-check-input"
    type="checkbox"
    value="yes"
    id="ds-id-1"
    required
  />
  <label class="form-check-label" for="ds-id-1"
    >I want to receive the NIHR newsletter</label
  >
</div>

Options to the checkbox() macro

label: string

The human-readable button label.

value: string

The checkbox's value.

required: boolean = false

Whether the checkbox is required.

checked: boolean

Whether the checkbox is checked.

disabled: boolean = false

Whether the checkbox must be disabled.

invalid: boolean = false

Whether the checkbox's state is valid.

id: string|null = null

The element's ID.

{% from 'macros/component/checkbox.html' import checkbox %}

{{ checkbox({
  'label': 'I want to receive the NIHR newsletter',
  'value': 'yes',
  'required': true
}) }}

Invalid checkbox

open this example in its own window 

<div class="form-check">
  <input
    class="form-check-input is-invalid"
    type="checkbox"
    value="yes"
    id="ds-id-2"
  />
  <label class="form-check-label" for="ds-id-2"
    >I want to receive the NIHR newsletter</label
  >
</div>

Options to the checkbox() macro

label: string

The human-readable button label.

value: string

The checkbox's value.

required: boolean = false

Whether the checkbox is required.

checked: boolean

Whether the checkbox is checked.

disabled: boolean = false

Whether the checkbox must be disabled.

invalid: boolean = false

Whether the checkbox's state is valid.

id: string|null = null

The element's ID.

{% from 'macros/component/checkbox.html' import checkbox %}

{{ checkbox({
  'label': 'I want to receive the NIHR newsletter',
  'value': 'yes',
  'invalid': true
}) }}

Disabled checkbox

open this example in its own window 

<div class="form-check">
  <input
    class="form-check-input"
    type="checkbox"
    value="yes"
    id="ds-id-3"
    disabled
  />
  <label class="form-check-label" for="ds-id-3"
    >I want to receive the NIHR newsletter</label
  >
</div>

Options to the checkbox() macro

label: string

The human-readable button label.

value: string

The checkbox's value.

required: boolean = false

Whether the checkbox is required.

checked: boolean

Whether the checkbox is checked.

disabled: boolean = false

Whether the checkbox must be disabled.

invalid: boolean = false

Whether the checkbox's state is valid.

id: string|null = null

The element's ID.

{% from 'macros/component/checkbox.html' import checkbox %}

{{ checkbox({
  'label': 'I want to receive the NIHR newsletter',
  'value': 'yes',
  'disabled': true
}) }}