Bifrost Design System

React CSS

Figma

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

RadioCard

Go to top

Props

Also see /react/checkboxCard

CheckboxCard component

Also see /react/radio

Radio component

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

Basic usage

TSX

<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.

Inactive state

Use state="inactive" for a focusable, tooltip-friendly replacement for disabled. The card chrome stays at full opacity; only the radio icon dims. See <CheckboxCard> for the full pattern.

TSX

<RadioCard state="inactive" name="inactiveDemo" label="Inactive option">...</RadioCard>

Inactive optionThis option isn't available with your current plan.

Checked inactiveAlready selected, but you can't change it right now.

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.

Open Sandbox

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>
  );
}