Bifrost Design System

RadioCard

import RadioCard from "@intility/bifrost-react/RadioCard";

For convenience, <RadioCard> is provided as an alias for <CheckboxCard type="radio">. Otherwise, it functions exactly the same as <CheckboxCard>.

Basic usage

<RadioCard name="radioDemo" label="Tasty walnut">
  Tasty walnut pesto tart farro platter elderberry cookies Italian
  pepperoncini cozy cinnamon oatmeal
</RadioCard>

<RadioCard name="radioDemo" label="Lemon">
  Lemon red lentil soup dessert lemon tahini dressing golden cayenne
  pepper springtime strawberry
</RadioCard>

Tasty walnutTasty walnut pesto tart farro platter elderberry cookies Italian pepperoncini cozy cinnamon oatmeal

LemonLemon red lentil soup dessert lemon tahini dressing golden cayenne pepper springtime strawberry

See <CheckboxCard> for more examples.

Sandbox

You can bind a RadioCard to a boolean state using the checked prop and update your state every time the onChange event is triggered.

import { useState } from "react";
import RadioCard from "@intility/bifrost-react/RadioCard";
import AutoCol from "@intility/bifrost-react/AutoCol";

export default function RadioCardDemo() {
  const [selected, setSelected] = useState("Lemon");

  return (
    <AutoCol>
      <RadioCard
        name="radioDemo"
        label="Tasty walnut"
        checked={selected === "Tasty walnut"}
        onChange={() => setSelected("Tasty walnut")}
      >
        Tasty walnut pesto tart farro platter elderberry cookies Italian
        pepperoncini cozy cinnamon oatmeal
      </RadioCard>
      <RadioCard
        name="radioDemo"
        label="Lemon"
        checked={selected === "Lemon "}
        onChange={() => setSelected("Lemon ")}
      >
        Lemon red lentil soup dessert lemon tahini dressing golden cayenne
        pepper springtime strawberry
      </RadioCard>
    </AutoCol>
  );
}

Open Sandbox