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
| Name | Type | Description |
|---|---|---|
| items | array | Required. Array of checkbox items objects. See items below. |
| hint | object | Options for the hint component (e.g. text). See hint options below. |
| idPrefix | string | String 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. |
| name | string | Required. Name attribute for all checkbox items. |
| classes | string | Classes to add to the checkboxes container. |
| error | boolean | If true, errorMessage will show. Defaults to false. |
| errorMessage | object | Options for the error message component. See errorMessage options below. |
Options for items
| Name | Type | Description |
|---|---|---|
| id | string | Specific id attribute for the checkbox item. If omitted, then component global idPrefix option will be applied. |
| contentText | string | Required. 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. |
| contentHTML | string | Required. 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. |
| value | string | Required. Value for the checkbox input. |
| checked | boolean | If true, checkbox will be checked. |
| titleText | string | Text to use as a heading for the checkbox option. (Displays as h3) |
| disabled | boolean | If true, checkbox will be disabled. |
Options for hint
| Name | Type | Description |
|---|---|---|
| id | string | Optional id attribute to add to the hint span tag. |
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| classes | string | Classes to add to the hint span tag. |
Options for errorMessage
| Name | Type | Description |
|---|---|---|
| id | string | Id attribute to add to the error message span tag. |
| contentText | string | Required. Text to use within the error message. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. HTML to use within the error message |
| classes | string | Classes to add to the error message span tag. |
Checkboxes with error
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
| Name | Type | Description |
|---|---|---|
| items | array | Required. Array of checkbox items objects. See items below. |
| hint | object | Options for the hint component (e.g. text). See hint options below. |
| idPrefix | string | String 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. |
| name | string | Required. Name attribute for all checkbox items. |
| classes | string | Classes to add to the checkboxes container. |
| error | boolean | If true, errorMessage will show. Defaults to false. |
| errorMessage | object | Options for the error message component. See errorMessage options below. |
Options for items
| Name | Type | Description |
|---|---|---|
| id | string | Specific id attribute for the checkbox item. If omitted, then component global idPrefix option will be applied. |
| contentText | string | Required. 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. |
| contentHTML | string | Required. 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. |
| value | string | Required. Value for the checkbox input. |
| checked | boolean | If true, checkbox will be checked. |
| titleText | string | Text to use as a heading for the checkbox option. (Displays as h3) |
| disabled | boolean | If true, checkbox will be disabled. |
Options for hint
| Name | Type | Description |
|---|---|---|
| id | string | Optional id attribute to add to the hint span tag. |
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| classes | string | Classes to add to the hint span tag. |
Options for errorMessage
| Name | Type | Description |
|---|---|---|
| id | string | Id attribute to add to the error message span tag. |
| contentText | string | Required. Text to use within the error message. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. HTML to use within the error message |
| classes | string | Classes 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
| Name | Type | Description |
|---|---|---|
| items | array | Required. Array of checkbox items objects. See items below. |
| hint | object | Options for the hint component (e.g. text). See hint options below. |
| idPrefix | string | String 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. |
| name | string | Required. Name attribute for all checkbox items. |
| classes | string | Classes to add to the checkboxes container. |
| error | boolean | If true, errorMessage will show. Defaults to false. |
| errorMessage | object | Options for the error message component. See errorMessage options below. |
Options for items
| Name | Type | Description |
|---|---|---|
| id | string | Specific id attribute for the checkbox item. If omitted, then component global idPrefix option will be applied. |
| contentText | string | Required. 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. |
| contentHTML | string | Required. 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. |
| value | string | Required. Value for the checkbox input. |
| checked | boolean | If true, checkbox will be checked. |
| disabled | boolean | If true, checkbox will be disabled. |
Options for hint
| Name | Type | Description |
|---|---|---|
| id | string | Optional id attribute to add to the hint span tag. |
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within the hint. If contentHTML is provided, the contentText argument will be ignored. |
| classes | string | Classes to add to the hint span tag. |
Options for errorMessage
| Name | Type | Description |
|---|---|---|
| id | string | Id attribute to add to the error message span tag. |
| contentText | string | Required. Text to use within the error message. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. HTML to use within the error message |
| classes | string | Classes to add to the error message span tag. |