Examples
Use in forms to toggle the state of something on or off. Default checkboxes can appear in two states: selected and disabled, or unselected.
Checkboxes are most commonly used to give merchants a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have merchants indicate they agree to specific terms and services.
Use in forms to toggle the state of something on or off. Default checkboxes can appear in two states: selected and disabled, or unselected.
Screen readers convey the state of the checkbox automatically.
disabled
prop to apply the HTML disabled
attribute to the checkbox <input>
. This prevents merchants from being able to interact with the checkbox, and conveys its inactive state to assistive technologies.id
prop to provide a unique id
attribute value for the checkbox. If an id
isn’t provided, then the component generates one. All checkboxes must have unique id
values to work correctly with assistive technologies.checked="indeterminate"
conveys the state of the checkbox using aria-checked="mixed"
.ariaControls
prop conveys the ID of the element whose contents or presence are controlled by the checkbox to screen reader users with the aria-controls
attribute.label
prop conveys the purpose of the checkbox to all merchantslabelHidden
prop to visually hide the label but make it available to assistive technologieshelpText
prop or an inline error message via the error
prop, the help or error content is conveyed to screen reader users with the aria-describedby
attributeUse in forms to toggle the state of something on or off. Default checkboxes can appear in two states: selected and disabled, or unselected.
See Material Design and development documentation about accessibility for Android:
Use in forms to toggle the state of something on or off. Default checkboxes can appear in two states: selected and disabled, or unselected.
See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
Checkboxes should:
Turn on notifications
instead of
Turn off notifications
Lists that use checkboxes should:
I agree to the Terms of Service.
You agree to the Terms of Service