#Basic

One
Two
Three
<RadioButtonCardGroup>
  <RadioButtonCardGroupItem
    name="basic-one"
    selectedItemName={basicExampleSelectedItemName}
  >
    One
  </RadioButtonCardGroupItem>
  <RadioButtonCardGroupItem
    name="basic-two"
    selectedItemName={basicExampleSelectedItemName}
  >
    Two
  </RadioButtonCardGroupItem>
  <RadioButtonCardGroupItem
    name="basic-three"
    selectedItemName={basicExampleSelectedItemName}
  >
    Three
  </RadioButtonCardGroupItem>
</RadioButtonCardGroup>

#Padding

Set padding to "sm", "md", or "lg". Defaults to "md".
One
Two
Three
One
Two
Three
One
Two
Three
<Stack class="gap-5">
  <RadioButtonCardGroup padding="sm">
    <RadioButtonCardGroupItem
      name="padding-sm-one"
      selectedItemName={paddingSmExampleSelectedItemName}
    >
      One
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="padding-sm-two"
      selectedItemName={paddingSmExampleSelectedItemName}
    >
      Two
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="padding-sm-three"
      selectedItemName={paddingSmExampleSelectedItemName}
    >
      Three
    </RadioButtonCardGroupItem>
  </RadioButtonCardGroup>
  <RadioButtonCardGroup padding="md">
    <RadioButtonCardGroupItem
      name="padding-md-one"
      selectedItemName={paddingMdExampleSelectedItemName}
    >
      One
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="padding-md-two"
      selectedItemName={paddingMdExampleSelectedItemName}
    >
      Two
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="padding-md-three"
      selectedItemName={paddingMdExampleSelectedItemName}
    >
      Three
    </RadioButtonCardGroupItem>
  </RadioButtonCardGroup>
  <RadioButtonCardGroup padding="lg">
    <RadioButtonCardGroupItem
      name="padding-lg-one"
      selectedItemName={paddingLgExampleSelectedItemName}
    >
      One
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="padding-lg-two"
      selectedItemName={paddingLgExampleSelectedItemName}
    >
      Two
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="padding-lg-three"
      selectedItemName={paddingLgExampleSelectedItemName}
    >
      Three
    </RadioButtonCardGroupItem>
  </RadioButtonCardGroup>
</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">
  <RadioButtonCardGroup rounded="square">
    <RadioButtonCardGroupItem
      name="rounded-square-one"
      selectedItemName={roundedSquareExampleSelectedItemName}
    >
      One
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="rounded-square-two"
      selectedItemName={roundedSquareExampleSelectedItemName}
    >
      Two
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="rounded-square-three"
      selectedItemName={roundedSquareExampleSelectedItemName}
    >
      Three
    </RadioButtonCardGroupItem>
  </RadioButtonCardGroup>
  <RadioButtonCardGroup rounded="sm">
    <RadioButtonCardGroupItem
      name="rounded-sm-one"
      selectedItemName={roundedSmExampleSelectedItemName}
    >
      One
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="rounded-sm-two"
      selectedItemName={roundedSmExampleSelectedItemName}
    >
      Two
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="rounded-sm-three"
      selectedItemName={roundedSmExampleSelectedItemName}
    >
      Three
    </RadioButtonCardGroupItem>
  </RadioButtonCardGroup>
  <RadioButtonCardGroup rounded="lg">
    <RadioButtonCardGroupItem
      name="rounded-lg-one"
      selectedItemName={roundedLgExampleSelectedItemName}
    >
      One
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="rounded-lg-two"
      selectedItemName={roundedLgExampleSelectedItemName}
    >
      Two
    </RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem
      name="rounded-lg-three"
      selectedItemName={roundedLgExampleSelectedItemName}
    >
      Three
    </RadioButtonCardGroupItem>
  </RadioButtonCardGroup>
</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

RadioButtonCardGroupItem

name*
Required
true
Type
string
Default
none
value
Required
false
Type
RadioButtonType["value"]
Default
none
selectedItemName*
Required
true
Type
Signal<string | null>
Default
none
Notes
See the Preact docs for signals.
radioButtonRest
Required
false
Type
Omit<RadioButtonType, "size">
Default
none
Notes
This gets spread to the RadioButton like so:
<div>
  ...
  <RadioButton {...radioButtonRest} />
</div>
children*
Required
true
Type
ComponentChild
Default
none