CheckboxCardGroup

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

#Basic

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

#Name

The approach below leads to name being passed to <input type="checkbox" />. This is useful when you are doing native form submissions.
One
Two
Three
<CheckboxCardGroup>
  <CheckboxCardGroupItem name="one">One</CheckboxCardGroupItem>
  <CheckboxCardGroupItem name="two">Two</CheckboxCardGroupItem>
  <CheckboxCardGroupItem name="three">Three</CheckboxCardGroupItem>
</CheckboxCardGroup>

#Handling changes

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
name--
CheckboxType["name"]
checkboxRest--
Omit<CheckboxType, "size" | "name">
This gets spread to the Checkbox like so:
<div>
  ...
  <Checkbox {...checkboxRest} />
</div>
children-
ComponentChild