Set of interactive buttons where multiple options can be selected at a time.
This component is based on the div
element and supports common margin props.
Contains all the parts of a checkbox group.
Prop | Type | Default |
---|---|---|
asChild | boolean | |
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
color | enum | |
highContrast | boolean |
An item in the group that can be checked.
Use the size
prop to control the checkbox size.
Use the variant
prop to control the visual style of the checkboxes.
Currently, we recommend using only the surface
and soft
variant following the ScaleUI Radix design system.
Composing CheckboxGroup.Item
within Text
automatically centers it with the first line of text.
It is automatically well-aligned with multi-line text too.
Use the native disabled
attribute to create a disabled checkbox.