Checkbox Group

A group of checkboxes allowing users to select multiple independent options from a list.

This component inherits props from the Checkbox Group component and supports common margin props.

Contains all the parts of a checkbox group.

PropTypeDefaultDescription
asChildbooleanfalseMerge root props onto immediate child
defaultValuestring[]Default selected values
valuestring[]Controlled selected values
size"1" | "2" | "3""2"Checkbox size
variant"classic" | "surface" | "soft""surface"Visual style variant
color"gray" | "purple""purple"Color theme

An item in the group that can be checked.

PropTypeDefaultDescription
valuestringUnique value for this item (required)
disabledbooleanfalseDisable the checkbox

Use a checkbox group when needing to select multiple independent options from a list, choosing any combination including none, some, or all available options.

Password rules

Add helper text to provide additional context about the checkbox group.

Password rules
Select which rules to enforce for new passwords.

Display validation messages along with helper text to provide feedback and context.

Password rules
Please select at least one password rule.Select which rules to enforce for new passwords.

Use the size prop to control the checkbox size.

Use the native disabled attribute to create disabled checkboxes within a group.

Password rules