Bifrost Design System

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

Radio

Go to top

Props

Also see /react/checkbox

Checkbox component

Also see /react/checkboxCard

CheckboxCard component

Basic radio buttons

For convenience, <Radio> is provided as an alias for <Checkbox type="radio"> and supports the same props.

Group by name for mutually exclusive radio buttons.

TSX

<Radio name='radioDemo' label='NRK P1' />
<Radio name='radioDemo' label='P4' />
<Radio name='radioDemo' label='NRJ' />
<Radio name='radioDemo' label='Radio Norge' />

NRK P1P4NRJRadio Norge

Group label

If you want to label a group, use <fieldset> and <legend>.

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

TSX

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

Choose a radio station

NRK P1P4NRJRadio Norge

Button style

Use button and small props to display as a button.

TSX

<Radio button label="Button style" />
<Radio button small label="Small button style" />

Button styleSmall button style

Inactive state

Use state="inactive" for a focusable, screen-readable, tooltip-friendly replacement for disabled. See <Checkbox> for the full pattern.

TSX

<Radio state="inactive" label="Inactive" />
<Radio state="inactive" label="Checked inactive" defaultChecked />

InactiveChecked inactive

Sandbox

Open Sandbox

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

const options = ["NRK P1", "P4", "NRJ", "Radio Norge"];

export default function RadioDemo() {
  const [selectedOption, setSelectedOption] = useState();

  return (
    <fieldset className="bf-fieldset">
      <legend className="bf-label">Choose a radio station</legend>
      <Grid gap={0}>
        {options.map((label) => (
          <Radio
            key={label}
            label={label}
            checked={selectedOption === label}
            onChange={(e) => setSelectedOption(label)}
            name="radioDemo"
          />
        ))}
      </Grid>
      <p>Selected: {selectedOption || "[none]"}</p>
    </fieldset>
  );
}