#Basic

One
Two
Three
<CheckboxCardGroup>
  <CheckboxCardGroupItem>One</CheckboxCardGroupItem>
  <CheckboxCardGroupItem>Two</CheckboxCardGroupItem>
  <CheckboxCardGroupItem>Three</CheckboxCardGroupItem>
</CheckboxCardGroup>

#Uncontrolled

The approach below leads to name being passed to <input type="checkbox" />.
One
Two
Three
<CheckboxCardGroup>
  <CheckboxCardGroupItem checkboxRest={{ name: "one" }}>
    One
  </CheckboxCardGroupItem>
  <CheckboxCardGroupItem checkboxRest={{ name: "two" }}>
    Two
  </CheckboxCardGroupItem>
  <CheckboxCardGroupItem checkboxRest={{ name: "three" }}>
    Three
  </CheckboxCardGroupItem>
</CheckboxCardGroup>

#Controlled

Pass onChange to CheckboxCardGroupItem. It has a type of (newValue: boolean) => void.
One
Two
Three
<CheckboxCardGroup>
  <CheckboxCardGroupItem onChange={() => {...}}>One</CheckboxCardGroupItem>
  <CheckboxCardGroupItem onChange={() => {...}}>Two</CheckboxCardGroupItem>
  <CheckboxCardGroupItem onChange={() => {...}}>Three</CheckboxCardGroupItem>
</CheckboxCardGroup>

#Padding

Set padding to "sm", "md", or "lg". Defaults to "md".
One
Two
Three
One
Two
Three
One
Two
Three
<Stack class="gap-5">
  <CheckboxCardGroup padding="sm">
    <CheckboxCardGroupItem>One</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Two</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Three</CheckboxCardGroupItem>
  </CheckboxCardGroup>
  <CheckboxCardGroup padding="md">
    <CheckboxCardGroupItem>One</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Two</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Three</CheckboxCardGroupItem>
  </CheckboxCardGroup>
  <CheckboxCardGroup padding="lg">
    <CheckboxCardGroupItem>One</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Two</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Three</CheckboxCardGroupItem>
  </CheckboxCardGroup>
</Stack>

#Rounded

Set rounded to "square", "sm", or "lg". Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
One
Two
Three
One
Two
Three
One
Two
Three
<Stack class="gap-5">
  <CheckboxCardGroup rounded="square">
    <CheckboxCardGroupItem>One</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Two</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Three</CheckboxCardGroupItem>
  </CheckboxCardGroup>
  <CheckboxCardGroup rounded="sm">
    <CheckboxCardGroupItem>One</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Two</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Three</CheckboxCardGroupItem>
  </CheckboxCardGroup>
  <CheckboxCardGroup rounded="lg">
    <CheckboxCardGroupItem>One</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Two</CheckboxCardGroupItem>
    <CheckboxCardGroupItem>Three</CheckboxCardGroupItem>
  </CheckboxCardGroup>
</Stack>

#Props

padding
Required
false
Type
"sm" | "md" | "lg"
Default
"md"
rounded
Required
false
Type
"square" | "sm" | "lg"
Default
none
Notes
Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
children*
Required
true
Type
ComponentChild
Default
none

CheckboxCardGroupItem

defaultIsChecked
Required
false
Type
boolean
Default
false
onChange
Required
false
Type
(newValue: boolean) => void
Default
none
checkboxRest
Required
false
Type
Omit<CheckboxType, "size">
Default
none
Notes
This gets spread to the Checkbox like so:
<div>
  ...
  <Checkbox {...checkboxRest} />
</div>
children*
Required
true
Type
ComponentChild
Default
none