RadioButtonCardGroup

Add some flair and professionalism to your radio buttons and associated content.
Note: The example below doesn't work due to a quirk in the docs.
Source code
One
Two
Three
import { RadioButtonCardGroup,RadioButtonCardGroupItem } from "rfui";

#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

PropRequiredDefaultType and notes
padding-"md"
"sm" | "md" | "lg"
rounded--
"square" | "sm" | "lg"
Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
children✔-
ComponentChild

RadioButtonCardGroupItem

PropRequiredDefaultType and notes
name✔-
string
value--
RadioButtonType["value"]
selectedItemName✔-
Signal<string | null>
See the Preact docs for signals.
radioButtonRest--
Omit<RadioButtonType, "size">
This gets spread to the RadioButton like so:
<div>
  ...
  <RadioButton {...radioButtonRest} />
</div>
children✔-
ComponentChild