CheckboxCard

Basic usage

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

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

Controlled state

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

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

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

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

Switch toggle

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

Custom label content

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

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

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

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

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

Disabled

CheckboxCard can be disabled, by passing disabled prop

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

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

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

Alert state

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

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

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