Checkbox

Basic Checkbox

<Checkbox label="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.

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

When the checked state is unknown use the indeterminate prop.

<Checkbox indeterminate label="Indeterminate checkbox" />

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

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.

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

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

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

Button style

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

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

Small button size

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

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

Custom label (like icon)

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

<Checkbox
  type="switch"
  button
  label={
    <>
      <Icon icon={faUser} color="var(--bfc-base-c-2)" />
      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.

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

Also applies a red border to button style:

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

On backgrounds

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

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

Disabled

Use disabled prop to disable the control.

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

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

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