RadioCard

Card-style radio input, used when only one choice may be selected in a series of options.

RadioCard is a card-style radio button. Use RadioCardGroup to manage the checked state of its children.

Default Radio Card

import { RadioCard, RadioCardGroup } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <RadioCardGroup defaultValue="1" flexDirection="row">
      <RadioCard value="1">Radio card</RadioCard>
      <RadioCard value="2">Radio card</RadioCard>
    </RadioCardGroup>
  );
}

Radio Card Group

import { RadioCard, RadioCardGroup } from "@caspeco/casper-ui-library";

export default function Demo() {
  const sizes = ["small", "medium", "large"];

  return (
    <RadioCardGroup defaultValue="medium" onValueChange={console.log}>
      {sizes.map((size) => {
        return (
          <RadioCard key={size} value={size}>
            {size}
          </RadioCard>
        );
      })}
    </RadioCardGroup>
  );
}