Checkboxes

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several.

Standalone checkbox

Indeterminate checkbox

Leverage the property indeterminateto display semi-checked statuses. If a few, but not all, sub-options of the child are checked, the parent checkbox will be in an indeterminate state.

Checkbox container inline

Example with flex

Example with fixed width

 

Checkbox Container with right slot

 

Checkbox Container with image

 

Checkbox Container in grid layout

 

Indicator-less Container

Use theme="indicator-less" with the addition of sdx-card as slot to display selectable cards.

 

Validation

To indicate to the user that a field or group is required, add the attribute required. This way, an Asterisk will be added at the end of the group label automatically.