Bifrost Design System

Design React CSS

Figma

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

CheckboxCard

Go to top

Props

Basic usage

CheckboxCard is a combination of <Card> and <Checkbox>

TSX

<CheckboxCard label="Blueberries">
  Blueberries udon noodles crispy iceberg lettuce picnic soy milk green tea
  scotch bonnet pepper tahini drizzle
</CheckboxCard>

BlueberriesBlueberries udon noodles crispy iceberg lettuce picnic soy milk green tea scotch bonnet pepper tahini drizzle

Controlled state

You can bind 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 CheckboxCard from "@intility/bifrost-react/CheckboxCard";

export default function () {
  const [selected, setSelected] = useState(true);
  return (
    <div className="bf-page-padding">
      <CheckboxCard
        label="Use checked and onChange props"
        checked={selected}
        onChange={() => setSelected(!selected)}
      >
        Blueberries udon noodles crispy iceberg lettuce picnic soy milk green
        tea scotch bonnet pepper tahini drizzle
      </CheckboxCard>
      <p>Current state: {selected.toString()}</p>
    </div>
  );
}

Radio buttons

Also see /react/radiocard

RadioCard alias

By default, type will be checkbox. If you want radio button, pass type='radio' to the component.

Use the same name to connect multiple radio cards (so only one of them can be selected).

TSX

<CheckboxCard name="radioDemo" type='radio'>...</CheckboxCard>
<CheckboxCard name="radioDemo" type='radio'>...</CheckboxCard>

BlueberriesBlueberries udon noodles crispy iceberg lettuce picnic soy milk green tea scotch bonnet pepper tahini drizzle

StrawberriesStrawberries udon noodles crispy iceberg lettuce picnic soy milk green tea scotch bonnet pepper tahini drizzle

Switch toggle

Also see /react/switchcard

SwitchCard alias

TSX

<CheckboxCard type="switch">...</CheckboxCard>

SwitchBlueberries udon noodles crispy iceberg lettuce picnic soy milk green tea scotch bonnet pepper tahini drizzle

Custom label content

The label prop also accepts JSX content. This can be useful if you want an icon next to your header:

TSX

<CheckboxCard
  label={
    <>
      <Icon icon={faAppleAlt} marginRight color="var(--bfc-base-c-2)" /> Apple
    </>
  }
>
  ...
</CheckboxCard>

AppleApple vinaigrette portobello mushrooms hummus falafel bowl mangos broccoli avocado

Header content

If you want to display content above your <CheckboxCard>, you can use header prop. You are responsible for the layout, but the component will ensure that your content is clickable and acts as a part of the component

TSX

<CheckboxCard
  label="Cilantro"
  header={<img src="/seal.jpg" alt="Grumpy-looking seal" />}
>
  ...
</CheckboxCard>

CilantroCilantro hemp seeds sparkling pomegranate punch Thai tomato and basil

ChiaChia seeds green bowl summer fruit salad lime ginger carrot spiced juice

Align left

Optional placement for the checkbox, radio, or switch icon with align="left".

TSX

<CheckboxCard align="left" ... />

CheckboxYou need to get out of this valley. This place is swarming with laser raptors. I'll meet you at the God's Drop. Katana can get you there.

SwitchBehold - it is me, Thor. Son of Odin and protector of mankind. Check out my pecs.

Alert state

You can set the state prop to alert to give feedback to the user that something is wrong with the selection.

TSX

<CheckboxCard state="alert">...</CheckboxCard>

Alert checkboxcardBlueberries udon noodles crispy iceberg lettuce picnic soy milk green tea scotch bonnet pepper tahini drizzle

Inactive state

Use state="inactive" instead of disabled when the user needs to know the card exists but cannot be toggled — and why. The card chrome and label stay fully visible; only the toggle icon is dimmed. The control stays focusable and screen-readable (announced via aria-disabled), and can be wrapped in a <Tooltip> to explain the reason.

This matches the pattern from <Button state="inactive">.

state="inactive" only handles styling and the aria-disabled attribute — the underlying <input> is still a real checkbox that the browser will toggle on click. To actually block toggling, render the card in controlled mode and ignore onChange (or never update the checked state) while inactive.

TSX

<CheckboxCard state="inactive" label="Inactive checkboxcard">...</CheckboxCard>
<CheckboxCard type="switch" state="inactive" label="Inactive switchcard">...</CheckboxCard>
<CheckboxCard type="radio" state="inactive" label="Inactive radiocard">...</CheckboxCard>

Inactive checkboxcardBlueberries udon noodles crispy iceberg lettuce picnic soy milk green tea scotch bonnet pepper tahini drizzle

Inactive switchcardBlueberries udon noodles crispy iceberg lettuce picnic soy milk green tea scotch bonnet pepper tahini drizzle

Inactive radiocardBlueberries udon noodles crispy iceberg lettuce picnic soy milk green tea scotch bonnet pepper tahini drizzle

Combine controlled state with <Tooltip> to keep the value frozen and explain why the card is inactive:

Open Sandbox

import { useState } from "react";
import CheckboxCard from "@intility/bifrost-react/CheckboxCard";
import Tooltip from "@intility/bifrost-react/Tooltip";

export default function InactiveCheckboxCardDemo() {
  const [showTip, setShowTip] = useState(false);
  return (
    <div className="bf-page-padding">
      <Tooltip
        content="Upgrade your plan to enable this option"
        visible={showTip}
        // Click outside or press Escape to dismiss the tooltip
        onHide={() => setShowTip(false)}
      >
        <CheckboxCard
          label="Premium reporting"
          state="inactive"
          type="switch"
          // `checked` is always false, so the card can't be toggled
          checked={false}
          // Show the tooltip when the user tries to toggle the card
          onChange={() => setShowTip(!showTip)}
        >
          Daily PDF exports, custom dashboards, and quarterly summaries.
        </CheckboxCard>
      </Tooltip>
    </div>
  );
}

Disabled

CheckboxCard can be disabled, by passing disabled prop.

Prefer state="inactive" for accessibility. A disabled control cannot be focused, read by screen readers, or hold a tooltip — so users can't discover why it's not interactive.

TSX

<CheckboxCard label="Kung Fury" disabled>
  ...
</CheckboxCard>

Kung FuryI'm a cop... from the future. I was sent back in time to kill Hitler, but I... I accidentally went back too far in time, and ended up in this place.

BarbariannaYou need to get out of this valley. This place is swarming with laser raptors.

If you're using header and disabled prop together, it will get reduced opacity.

TSX

<CheckboxCard
  label="Seal"
  disabled
  header={<img src="/seal.jpg" alt="Grumpy-looking seal" />}
>
  ...
</CheckboxCard>

SealNot to be confused with the Navy Seals

SpineYou don't need that Spine, it's holding you back!

Sandbox

Open Sandbox

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

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

  return (
    <AutoCol>
      <CheckboxCard
        label="Tasty walnut"
        checked={selected === "Tasty walnut"}
        onChange={() => setSelected("Tasty walnut")}
        type="radio"
      >
        Tasty walnut pesto tart farro platter elderberry cookies Italian
        pepperoncini cozy cinnamon oatmeal
      </CheckboxCard>

      <CheckboxCard
        label="Lemon"
        checked={selected === "Lemon "}
        onChange={() => setSelected("Lemon ")}
        type="radio"
      >
        Lemon red lentil soup dessert lemon tahini dressing golden cayenne
        pepper springtime strawberry
      </CheckboxCard>
    </AutoCol>
  );
}