Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Components

Checkboxes

About

What does it do?

  • Allows users select one or more options by clicking the box.

When to use it?

  • When user can select multiple options from the list
  • When user wants to toggle option on or off

When not to use it?

  • When user can select just one option.

Select all options that apply

HTML markup
<div class="wmnds-fe-group">
  <div class="wmnds-fe-checkboxes">
    <span class="wmnds-fe-checkboxes__desc">
      Select all options that apply
    </span>
    <label class="wmnds-fe-checkboxes__container">
      Option 1
      <input id="checkboxes_option1" class="wmnds-fe-checkboxes__input" value="" name="checkbox-example" checked="checked" type="checkbox" />
      <span class="wmnds-fe-checkboxes__checkmark">
        <svg class="wmnds-fe-checkboxes__icon">
          <use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
        </svg>
      </span>
    </label>
    <label class="wmnds-fe-checkboxes__container">
      Option 2
      <input id="checkboxes_option2" class="wmnds-fe-checkboxes__input" value="" name="checkbox-example" type="checkbox" />
      <span class="wmnds-fe-checkboxes__checkmark">
        <svg class="wmnds-fe-checkboxes__icon">
          <use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
        </svg>
      </span>
    </label>
    <label class="wmnds-fe-checkboxes__container">
      Option 3
      <input id="checkboxes_option3" class="wmnds-fe-checkboxes__input" value="" name="checkbox-example" type="checkbox" />
      <span class="wmnds-fe-checkboxes__checkmark">
        <svg class="wmnds-fe-checkboxes__icon">
          <use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
        </svg>
      </span>
    </label>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/form-elements/checkboxes/_checkboxes.njk" import wmndsCheckboxes %}

{{
   wmndsCheckboxes({
      items: [
         {
            id: null,
            contentText: "Option 1",
            contentHTML: null,
            value: "option1",
            checked: false,
            titleText: null,
            disabled: false
         },
         {
            id: null,
            contentText: "Option 2",
            contentHTML: null,
            value: "option2",
            checked: true,
            titleText: null,
            disabled: true
         },
         {
            id: null,
            contentText: "Option 3",
            contentHTML: null,
            value: "option3",
            checked: false,
            titleText: null,
            disabled: false
         }
      ],
      hint: {
         id: null,
         contentHTML: null,
         contentText: "Select all options that apply",
         classes: null
      },
      idPrefix: "checkbox",
      name: "checkboxes-example",
      classes: null,
      error: false,
      errorMessage: {
         id: null,
         contentText: "Please select at least one option",
         contentHTML: null,
         classes: null
      }
   })
}}

Nunjucks properties
NameTypeDescription
itemsarrayRequired. Array of checkbox items objects. See items below.
hintobjectOptions for the hint component (e.g. text). See hint options below.
idPrefixstringString to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
namestringRequired. Name attribute for all checkbox items.
classesstringClasses to add to the checkboxes container.
errorbooleanIf true, errorMessage will show. Defaults to false.
errorMessageobjectOptions for the error message component. See errorMessage options below.

Options for items

NameTypeDescription
idstringSpecific id attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
contentTextstringRequired. If contentHTML is set, this is not required. Text to use within each checkbox item label. If contentHTML is provided, the contentText argument will be ignored.
contentHTMLstringRequired. If contentText is set, this is not required. HTML to use within each checkbox item label. If contentHTML is provided, the contentText argument will be ignored.
valuestringRequired. Value for the checkbox input.
checkedbooleanIf true, checkbox will be checked.
titleTextstringText to use as a heading for the checkbox option. (Displays as h3)
disabledbooleanIf true, checkbox will be disabled.

Options for hint

NameTypeDescription
idstringOptional id attribute to add to the hint span tag.
contentTextstringRequired. If contentHTML is set, this is not required. Text to use within the hint. If contentHTML is provided, the contentText argument will be ignored.
contentHTMLstringRequired. If contentText is set, this is not required. HTML to use within the hint. If contentHTML is provided, the contentText argument will be ignored.
classesstringClasses to add to the hint span tag.

Options for errorMessage

NameTypeDescription
idstringId attribute to add to the error message span tag.
contentTextstringRequired. Text to use within the error message. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. HTML to use within the error message
classesstringClasses to add to the error message span tag.

Checkboxes with error


Please select at least one option Select all options that apply

HTML markup
<div class="wmnds-fe-group wmnds-fe-group--error">
  <div class="wmnds-fe-checkboxes">
    <span class="wmnds-fe-error-message">Please select at least one option</span>
    <span class="wmnds-fe-checkboxes__desc">
      Select all options that apply
    </span>
    <label class="wmnds-fe-checkboxes__container">
      <div class="wmnds-m-b-lg">Option 1
      </div>
      <input id="error-checkboxes_option1" class="wmnds-fe-checkboxes__input" value="option1" name="error-checkboxes_option1" type="checkbox" />
      <span class="wmnds-fe-checkboxes__checkmark">
        <svg class="wmnds-fe-checkboxes__icon">
          <use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
        </svg>
      </span>
    </label>
    <label class="wmnds-fe-checkboxes__container">
      <div class="wmnds-m-b-lg">Option 2
      </div>
      <input id="error-checkboxes_option2" class="wmnds-fe-checkboxes__input" value="option2" name="error-checkboxes_option2" type="checkbox" />
      <span class="wmnds-fe-checkboxes__checkmark">
        <svg class="wmnds-fe-checkboxes__icon">
          <use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
        </svg>
      </span>
    </label>
    <label class="wmnds-fe-checkboxes__container">
      <div class="wmnds-m-b-lg">Option 3
      </div>
      <input id="error-checkboxes_option3" class="wmnds-fe-checkboxes__input" value="option3" name="error-checkboxes_option3" type="checkbox" />
      <span class="wmnds-fe-checkboxes__checkmark">
        <svg class="wmnds-fe-checkboxes__icon">
          <use xlink:href="#wmnds-general-checkmark" href="#wmnds-general-checkmark"></use>
        </svg>
      </span>
    </label>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/form-elements/checkboxes/_checkboxes.njk" import wmndsCheckboxes %}

{{
   wmndsCheckboxes({
      items: [
         {
            id: null,
            contentText: "Option 1",
            contentHTML: null,
            value: "option1",
            checked: false,
            titleText: null,
            disabled: false
         },
         {
            id: null,
            contentText: "Option 2",
            contentHTML: null,
            value: "option2",
            checked: true,
            titleText: null,
            disabled: true
         },
         {
            id: null,
            contentText: "Option 3",
            contentHTML: null,
            value: "option3",
            checked: false,
            titleText: null,
            disabled: false
         }
      ],
      hint: {
         id: null,
         contentHTML: null,
         contentText: "Select all options that apply",
         classes: null
      },
      idPrefix: "checkbox",
      name: "checkboxes-example",
      classes: null,
      error: false,
      errorMessage: {
         id: null,
         contentText: "Please select at least one option",
         contentHTML: null,
         classes: null
      }
   })
}}

Nunjucks properties
NameTypeDescription
itemsarrayRequired. Array of checkbox items objects. See items below.
hintobjectOptions for the hint component (e.g. text). See hint options below.
idPrefixstringString to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
namestringRequired. Name attribute for all checkbox items.
classesstringClasses to add to the checkboxes container.
errorbooleanIf true, errorMessage will show. Defaults to false.
errorMessageobjectOptions for the error message component. See errorMessage options below.

Options for items

NameTypeDescription
idstringSpecific id attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
contentTextstringRequired. If contentHTML is set, this is not required. Text to use within each checkbox item label. If contentHTML is provided, the contentText argument will be ignored.
contentHTMLstringRequired. If contentText is set, this is not required. HTML to use within each checkbox item label. If contentHTML is provided, the contentText argument will be ignored.
valuestringRequired. Value for the checkbox input.
checkedbooleanIf true, checkbox will be checked.
titleTextstringText to use as a heading for the checkbox option. (Displays as h3)
disabledbooleanIf true, checkbox will be disabled.

Options for hint

NameTypeDescription
idstringOptional id attribute to add to the hint span tag.
contentTextstringRequired. If contentHTML is set, this is not required. Text to use within the hint. If contentHTML is provided, the contentText argument will be ignored.
contentHTMLstringRequired. If contentText is set, this is not required. HTML to use within the hint. If contentHTML is provided, the contentText argument will be ignored.
classesstringClasses to add to the hint span tag.

Options for errorMessage

NameTypeDescription
idstringId attribute to add to the error message span tag.
contentTextstringRequired. Text to use within the error message. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. HTML to use within the error message
classesstringClasses to add to the error message span tag.

Checkboxes as secondary button

What does it do?

  • Allows users select one or more options by clicking the button

When to use it?

  • When there is limited vertical space


HTML markup
<div class="wmnds-fe-group">
  <div class="wmnds-fe-checkbox-buttons">
    <span class="wmnds-fe-checkbox-buttons__desc">
      Select all options that apply
    </span>
    <div class="wmnds-fe-checkbox-buttons__container">
      <input id="checkboxButtons_Mon" class="wmnds-screenreaders-only wmnds-fe-checkbox-buttons__input" value="Mon" name="checkboxButtons_Mon" type="checkbox" />
      <label for="checkboxButtons_Mon" class="wmnds-fe-checkbox-button wmnds-btn wmnds-btn--secondary">
        Mon
      </label>
      <input id="checkboxButtons_Tue" class="wmnds-screenreaders-only wmnds-fe-checkbox-buttons__input" value="Tue" name="checkboxButtons_Tue" type="checkbox" />
      <label for="checkboxButtons_Tue" class="wmnds-fe-checkbox-button wmnds-btn wmnds-btn--secondary">
        Tue
      </label>
      <input id="checkboxButtons_Wed" class="wmnds-screenreaders-only wmnds-fe-checkbox-buttons__input" value="Wed" name="checkboxButtons_Wed" type="checkbox" />
      <label for="checkboxButtons_Wed" class="wmnds-fe-checkbox-button wmnds-btn wmnds-btn--secondary">
        Wed
      </label>
      <input id="checkboxButtons_Thu" class="wmnds-screenreaders-only wmnds-fe-checkbox-buttons__input" value="Thu" name="checkboxButtons_Thu" type="checkbox" />
      <label for="checkboxButtons_Thu" class="wmnds-fe-checkbox-button wmnds-btn wmnds-btn--secondary">
        Thu
      </label>
      <input id="checkboxButtons_Fri" class="wmnds-screenreaders-only wmnds-fe-checkbox-buttons__input" value="Fri" name="checkboxButtons_Fri" type="checkbox" checked="checked" />
      <label for="checkboxButtons_Fri" class="wmnds-fe-checkbox-button wmnds-btn wmnds-btn--secondary">
        Fri
      </label>
      <input id="checkboxButtons_Sat" class="wmnds-screenreaders-only wmnds-fe-checkbox-buttons__input" value="Sat" name="checkboxButtons_Sat" type="checkbox" checked="checked" />
      <label for="checkboxButtons_Sat" class="wmnds-fe-checkbox-button wmnds-btn wmnds-btn--secondary">
        Sat
      </label>
      <input id="checkboxButtons_Sun" class="wmnds-screenreaders-only wmnds-fe-checkbox-buttons__input" value="Sun" name="checkboxButtons_Sun" type="checkbox" checked="checked" />
      <label for="checkboxButtons_Sun" class="wmnds-fe-checkbox-button wmnds-btn wmnds-btn--secondary">
        Sun
      </label>
    </div>
  </div>
</div>

Nunjucks markup
{% from "wmnds/components/form-elements/checkboxes/checkbox-buttons/_checkbox-buttons.njk" import wmndsCheckboxButtons %}

{{
   wmndsCheckboxButtons({
      idPrefix: "checkboxButtons",
      items: [
        {
          contentText: "Mon",
          value: "Mon"
        },
        {
          contentText: "Tue",
          value: "Tue"
        },
        {
          contentText: "Wed",
          value: "Wed"
        },
        {
          contentText: "Thu",
          value: "Thu"
        },
        {
          contentText: "Fri",
          value: "Fri",
          checked: true
        },
        {
          contentText: "Sat",
          value: "Sat",
          checked: true
        },
        {
          contentText:  "Sun",
          value: "Sun",
          checked: true
        }
      ]
    })
}}

Nunjucks properties
NameTypeDescription
itemsarrayRequired. Array of checkbox items objects. See items below.
hintobjectOptions for the hint component (e.g. text). See hint options below.
idPrefixstringString to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
namestringRequired. Name attribute for all checkbox items.
classesstringClasses to add to the checkboxes container.
errorbooleanIf true, errorMessage will show. Defaults to false.
errorMessageobjectOptions for the error message component. See errorMessage options below.

Options for items

NameTypeDescription
idstringSpecific id attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
contentTextstringRequired. If contentHTML is set, this is not required. Text to use within each checkbox item label. If contentHTML is provided, the contentText argument will be ignored.
contentHTMLstringRequired. If contentText is set, this is not required. HTML to use within each checkbox item label. If contentHTML is provided, the contentText argument will be ignored.
valuestringRequired. Value for the checkbox input.
checkedbooleanIf true, checkbox will be checked.
disabledbooleanIf true, checkbox will be disabled.

Options for hint

NameTypeDescription
idstringOptional id attribute to add to the hint span tag.
contentTextstringRequired. If contentHTML is set, this is not required. Text to use within the hint. If contentHTML is provided, the contentText argument will be ignored.
contentHTMLstringRequired. If contentText is set, this is not required. HTML to use within the hint. If contentHTML is provided, the contentText argument will be ignored.
classesstringClasses to add to the hint span tag.

Options for errorMessage

NameTypeDescription
idstringId attribute to add to the error message span tag.
contentTextstringRequired. Text to use within the error message. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. HTML to use within the error message
classesstringClasses to add to the error message span tag.