Checkbox

Selection of one or more items

Demo

For additional information about forms and its common elements see Form.

Name	Description
`<fieldset role="group">`	Standard HTML tag, accepts a checkbox group as content
`<input type="checkbox">`	Standard HTML tag, no content

Name	Description
`unlabeled`	Styles a checkbox that has no associated `<label>`. Each checkbox with this class must have a descriptive `aria-label`.
`label.ai-assisted`	Adds an AI-assisted icon to the checkbox label.
`div.input-desc`	Optional description. Place this directly after the checkbox group `fieldset`.
`div.input-msg`	Optional validation message shown only when checkbox group `fieldset` has class `error`, `warning`, `success`. Place this after the fieldset and any `.input-desc` text.
`legend.required`	Styles a required fieldset's `legend`.
`legend.disabled`	Styles a disabled fieldset's `legend`.
`fieldset.success`	Shows `input-msg` with success styling.
`fieldset.warning`	Shows `input-msg` with warning styling.
`fieldset.error`	Shows `input-msg` with error styling.

In addition to the attributes documented here, all standard attributes apply. See MDN <input type="checkbox"> Attributes for official docs.

Name	Value	Required	Description
`disabled`	Boolean attribute		Gives the checkbox disabled styling and prevents interaction.
`readonly`	Boolean attribute		Gives the checkbox read-only styling, but does not disable the checkbox. Use this attribute in conjunction with the `disabled` attribute.

Assign the group role to a fieldset containing checkboxes; also use the aria-labelledby attribute on the fieldset.

If a checkbox must be presented without a visible label, give it the unlabeled class and a descriptive aria-label.

The indeterminate property will also be styled, as shown here.

function toggle(demo) { if (demo.readOnly) demo.checked = demo.readOnly = false; else if (!demo.checked) demo.readOnly = demo.indeterminate = true; }

Design resources can be found on the Skylab design documentation site: skylab.avalara.com