Menu
Components
This page is In Progress and subject to frequent changes
Please contact Gemma D. to verify any information is correct before using it.
Checkbox
In Progress
A checkbox allows users to confirm a statement. They're widely used in gaining user consent or agreement.
UX Owner: Charlie Corkbeat
UI Owner: Steven Roberts
Note: This component doesn't yet exist in Storybook, preliminary image(s) shown.
On this page
Example
When to use
A checkbox can be used where:
- the user is required to confirm a statement before they can continue?(such as agreeing to terms and conditions)
When not to use
If you’re considering using more than one checkbox in the same space, take a look at the checkbox group component instead, as it’s likely to be more appropriate.
Variants
Checkbox without container
This variant can be used when space is at a premium. For example when the button text runs over two lines.
Note: The tappable area still includes the text alongside the checkbox
Anatomy
Providing a shortcut for an input field
A checkbox allows us to ask users to provide a positive confirmation of understanding before continuing. But it’s not limited to legal acknowledgements.
It’s also occassionally used in conjunction with another field to allow the user to skip the input, like in the example below.
Example
Note: In this example, the user can leave the date input blank provided they select the checkbox. If the date input is left blank and the checkbox is left unselected, validation would prevent the user from progressing.
Similar components
Where to find this component
Documentation version history
Last updated Tuesday, 30th March 2021 09:29 by Gemma D.