Checkbox
A checkbox is an input control that allows a user to select one or more options from number of choices.
Variants
There are a total of 6 variations of checkboxes available in GEL to choose from.
Demo
Guidance
- Checkboxes options ideally should be stacked vertically, however can be horizontally placed if the width is sufficient.
- All checkbox should be followed by text in a from.
- Users are able to select an option by clicking/tapping either the checkbox or its label.
- Consider using a Select if the options provided are more than 5.
- An intermediate state of checkbox can also be displayed when only some options are selected.
When to use
- Checkboxes are used in a form or multiselect dropdown for a user to indicate a selection of one or more options.D
When not to use
- If you are wanting to have a change immediately applied when an option is selected, consider using a toggle/switch instead.
- If selecting an option would change the state or view of other content, consider using a segmented control instead.
Consideration
Designer assets
figma
Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.
Developer API
vue
Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP