Examples
Examples
Basic Usage
A group of Checkboxes is set up by setting a descriptive label for the group.
Extended Usage
Checkboxes within a Checkbox Group can use all their features to create rich user experiences.
Help Text
The help text serves the purpose of guiding a user's decision by providing additional information.
A help text can either be passed as an attribute for simple string-based content or via a slot for rich formatted content.
Required and Optional
Adding a required or optional label helps users to be guided while filling out a form. Usually, only Checkbox Groups that are an exception to the majority of other form fields in a form are marked as required or optional. For example, a Checkbox Group is marked as "Required" when the majority of the fields in the same form are optional and vice versa.
Validation
A Checkbox Group's validity can either be determined automatically when used inside a form or can be controlled from outside based on custom rules and application business logic.
Inside a Form
Checkbox Groups seamlessly integrate into a form's validation workflows and validate when a form is submitted. When no custom validation message is provided, the Checkbox falls back to the browser's native validation message.
💡Did you know?
A Checkbox Group that contains required Checkboxes expects at least one option to be ticked. Setting one Checkbox as required has the same effect as setting all of them to be required.
Inside an application
The validity of a Checkbox Group can also be controlled from outside based on custom rules or other business logic of an application. When flagged as invalid, a Checkbox Group expects a descriptive validation message to be set alongside.
Disabled
An entire Group of Checkboxes can be marked as disabled.
💡 Did you know?
It is also possible to disable individual Checkboxes.