Bifrost Design System

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

Checkbox

Props

Basic Checkbox

TSX

<Checkbox label="Basic checkbox" />

Basic checkbox

Controlled state

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

export default function CheckboxDemo() {
  const [selected, setSelected] = useState(true);
  return (
    <div className="bf-page-padding">
      <Checkbox
        label="Use checked and onChange props"
        checked={selected}
        onChange={() => setSelected(!selected)}
      />
      <p>Current state: {selected.toString()}</p>
    </div>
  );
}

Indeterminate Checkbox

Not applicable for "radio" or "switch" types

When the checked state is unknown use the indeterminate prop.

TSX

<Checkbox indeterminate label="Indeterminate checkbox" />

Indeterminate checkbox

This can be useful for a group or hierarchy of checkboxes:

Open Sandbox

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

const options = ["Pepperoni", "Ham", "Pineapple", "Extra Cheese"];

export default function IndeterminateDemo() {
  const [selectedOptions, setSelectedOptions] = useState(["Ham"]);
  const noneChecked = selectedOptions.length === 0;
  const allChecked = selectedOptions.length === options.length;

  function toggle(option, e) {
    if (e.target.checked) {
      setSelectedOptions((opts) => [...opts, option]);
    } else {
      setSelectedOptions((opts) => opts.filter((x) => x !== option));
    }
  }
  return (
    <div className="bf-padding">
      <Checkbox
        label="All toppings"
        checked={allChecked}
        onChange={() => setSelectedOptions(allChecked ? [] : options)}
        indeterminate={!noneChecked && !allChecked}
      />
      <div className="bf-padding-x">
        {options.map((option) => (
          <div key={option}>
            <Checkbox
              label={option}
              checked={selectedOptions.indexOf(option) > -1}
              onChange={(e) => toggle(option, e)}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

Radio buttons

Set type="radio" and group by name for mutually exclusive radio buttons.

We recommend labelling a set of checkboxes using <fieldset> and <legend>.

This example also uses <Grid> since <Checkbox> is an inline element by default.

TSX

<fieldset className="bf-fieldset">
  <legend className="bf-label">Choose a radio station</legend>
  <Grid gap={0}>
    <Checkbox type="radio" name="radioDemo" label="NRK P1" />
    <Checkbox type="radio" name="radioDemo" label="P4" />
    <Checkbox type="radio" name="radioDemo" label="NRJ" />
    <Checkbox type="radio" name="radioDemo" label="Radio Norge" />
  </Grid>
</fieldset>

Choose a radio station

NRK P1P4NRJRadio Norge

Radio component alias

See more examples at <Radio> component docs

Also see /react/feedback

Provide feedback using <Feedback> component

Switch toggle

A Checkbox with type="switch" functions exactly the same a normal checkbox, and only differs in styling.

For convenience, <Switch> is provided as an alias for <Checkbox type="switch">.

TSX

<Checkbox type="switch" label="Switch toggle" />

Switch toggle

Switch component alias

See more examples at <Switch> component docs

Button style

Use button prop to display as a button. This works for checkboxes of type "radio" and "switch" as well.

TSX

<Checkbox button label="Checkbox with button prop" />
<Checkbox button type="radio" label="Radio button with button prop" />
<Checkbox button type="switch" label="Switch toggle with button prop" />

Checkbox with button propRadio button with button propSwitch toggle with button prop

Small button size

Use the small prop (along with button) for a smaller button size.

TSX

<Checkbox small button label="Small checkbox" />
<Checkbox small button label="Small radio" type="radio" />
<Checkbox small button label="Small switch" type="switch" />

Small checkboxSmall radioSmall switch

Custom label (like icon)

The label prop accepts JSX content, useful if you want to supply an icon.

TSX

<Checkbox
  type="switch"
  button
  label={
    <>
      <Icon icon={faUser} color="var(--bfc-base-c-2)" />
      Include myself as a signee
    </>
  }
/>

Include myself as a signee

Alert state

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

TSX

<Checkbox state="alert" label="Checkbox" />
<Checkbox indeterminate state="alert" label="Indeterminate checkbox" />
<Checkbox type="switch" state="alert" label="Switch" />
<Checkbox type="radio" state="alert" label="Radio" />

CheckboxIndeterminate checkboxSwitchRadio

Also applies a red border to button style:

TSX

<Checkbox button state="alert" label="Checkbox button" />

Checkbox button

Inactive state

Use state="inactive" instead of disabled when the user needs to know that the control exists but cannot be toggled — and why. Unlike disabled, an inactive checkbox stays focusable, is read by screen readers (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 control in controlled mode and ignore onChange (or never update the checked state) while inactive.

TSX

<Checkbox state="inactive" label="Checkbox" />
<Checkbox state="inactive" type="switch" label="Switch" />
<Checkbox state="inactive" type="radio" label="Radio" />

CheckboxSwitchRadio

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

Open Sandbox

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

export default function InactiveCheckboxDemo() {
  const [showTip, setShowTip] = useState(false);
  // `checked` is hard-coded — we never update it from onChange, so the
  // switch cannot be toggled. We hijack onChange to surface a tooltip
  // explaining why instead.
  return (
    <div className="bf-page-padding">
      <Tooltip
        content="Can't toggle this until you finish onboarding"
        visible={showTip}
        onHide={() => setShowTip(false)}
      >
        <Switch
          state="inactive"
          checked={false}
          label="Auto-approve invoices"
          onChange={() => setShowTip(!showTip)}
        />
      </Tooltip>
    </div>
  );
}

On backgrounds

New in 6.13

When placing a checkbox on a non-base background, use state="inherit" to follow current text color.

TSX

<Box background="theme" padding radius>
  <Checkbox state="inherit" label="Checkbox on theme background" />
</Box>
<Box background="theme-fade" padding radius>
  <Checkbox state="inherit" label="Checkbox on theme-fade background" />
</Box>

Checkbox on theme background

Checkbox on theme-fade background

Disabled

Use disabled prop to disable the control.

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

<Checkbox disabled label="Disabled checkbox" />

Hide label

Use hideLabel to hide the label. Usually you shouldn't do this!

The label prop is still required for accessibility (screen readers will be able to read the hidden label as long as you pass a string)

TSX

<Checkbox label="Would you consider this an awesome person?" hideLabel />

Would you consider this an awesome person?

Can be useful in a table where they are labelled by the table header, also works with switch and radio type:

Name	Race	Awesome	Standing	Sitting
Korg	Kronan	Would you consider this an awesome person?	Is the person standing?	Is the person sitting?
Thor	Asgardian	Would you consider this an awesome person?	Is the person standing?	Is the person sitting?

Sandbox

Edit the code to explore how the props affect the component.

Open Sandbox

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

export default function CheckboxSandbox() {
  const [checked, setChecked] = useState(false);
  return (
    <div className="bf-page-padding">
      <Checkbox
        label="Demo checkbox"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
      <p>
        Checked: <code>{checked.toString()}</code>
      </p>
    </div>
  );
}