RadioButtonCardGroup

Add some flair and professionalism to your radio buttons and associated content.
Note: The example below is slightly buggy due to a quirk in the docs, not due to a real issue with the component.
Source code
One
Two
Three
import { RadioButtonCardGroup, RadioButtonCardGroupItem } from "rfui-package";

#Basic

One
Two
Three
<RadioButtonCardGroup name="basic-example">
  <RadioButtonCardGroupItem value="one">One</RadioButtonCardGroupItem>
  <RadioButtonCardGroupItem value="two">Two</RadioButtonCardGroupItem>
  <RadioButtonCardGroupItem value="three">Three</RadioButtonCardGroupItem>
</RadioButtonCardGroup>

#Reacting to changes

One
Two
Three
<RadioButtonCardGroup 
  name="on-change-example" 
  onChange={(newValue) => {
    console.log(newValue);
  }}
>
  <RadioButtonCardGroupItem value="one">One</RadioButtonCardGroupItem>
  <RadioButtonCardGroupItem value="two">Two</RadioButtonCardGroupItem>
  <RadioButtonCardGroupItem value="three">Three</RadioButtonCardGroupItem>
</RadioButtonCardGroup>

#With different value initially selected

By default the first value will be selected. This is in accordance with UX best practices. If you want a different value to be selected you can use initialSelectedValue.
One
Two
Three
<RadioButtonCardGroup 
  name="initial-selected-value-example" 
  initialSelectedValue="two"
>
  <RadioButtonCardGroupItem value="one">One</RadioButtonCardGroupItem>
  <RadioButtonCardGroupItem value="two">Two</RadioButtonCardGroupItem>
  <RadioButtonCardGroupItem value="three">Three</RadioButtonCardGroupItem>
</RadioButtonCardGroup>

#With no value initially selected

By default the first value will be selected. This is in accordance with UX best practices. If you don't want a value to be initially selected you can set initialSelectedValue to an empty string.
One
Two
Three
<RadioButtonCardGroup 
  name="no-initial-selected-value-example" 
  initialSelectedValue=""
>
  <RadioButtonCardGroupItem value="one">One</RadioButtonCardGroupItem>
  <RadioButtonCardGroupItem value="two">Two</RadioButtonCardGroupItem>
  <RadioButtonCardGroupItem value="three">Three</RadioButtonCardGroupItem>
</RadioButtonCardGroup>

#Padding

Set padding to "sm", "md", or "lg". Defaults to "md".
One
Two
Three
One
Two
Three
One
Two
Three
<Stack className="gap-5">
  <RadioButtonCardGroup name="padding-example-sm" padding="sm">
    <RadioButtonCardGroupItem value="one">One</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="two">Two</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="three">Three</RadioButtonCardGroupItem>
  </RadioButtonCardGroup>
  <RadioButtonCardGroup name="padding-example-md" padding="md">
    <RadioButtonCardGroupItem value="one">One</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="two">Two</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="three">Three</RadioButtonCardGroupItem>
  </RadioButtonCardGroup>
  <RadioButtonCardGroup name="padding-example-lg" padding="lg">
    <RadioButtonCardGroupItem value="one">One</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="two">Two</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="three">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 className="gap-5">
  <RadioButtonCardGroup name="rounded-example-square" rounded="square">
    <RadioButtonCardGroupItem value="one">One</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="two">Two</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="three">Three</RadioButtonCardGroupItem>
  </RadioButtonCardGroup>
  <RadioButtonCardGroup name="rounded-example-sm" rounded="sm">
    <RadioButtonCardGroupItem value="one">One</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="two">Two</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="three">Three</RadioButtonCardGroupItem>
  </RadioButtonCardGroup>
  <RadioButtonCardGroup name="rounded-example-lg" rounded="lg">
    <RadioButtonCardGroupItem value="one">One</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="two">Two</RadioButtonCardGroupItem>
    <RadioButtonCardGroupItem value="three">Three</RadioButtonCardGroupItem>
  </RadioButtonCardGroup>
</Stack>

#Props

PropRequiredDefaultType and notes
name✔-
RadioButtonType["name"]
initialSelectedValue--
RadioButtonType["value"]
padding-"md"
"sm" | "md" | "lg"
rounded--
"square" | "sm" | "lg"
Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".
onChange--
(newValue: RadioButtonType["value"]) => void;
children✔-
ComponentChild

RadioButtonCardGroupItem

PropRequiredDefaultType and notes
value--
RadioButtonType["value"]
children✔-
ComponentChild