CheckboxCardGroup

Add some flair and professionalism to your checkboxes and associated content.
Source code
One
Two
Three
import { CheckboxCardGroup,CheckboxCardGroupItem } from "rfui";

#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

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

CheckboxCardGroupItem

PropRequiredDefaultType and notes
defaultIsChecked-false
boolean
onChange--
(newValue: boolean) => void
checkboxRest--
Omit<CheckboxType, "size">
This gets spread to the Checkbox like so:
<div>
  ...
  <Checkbox {...checkboxRest} />
</div>
children✔-
ComponentChild