Radio

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.

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

Button style

Use button and small props to display as a button.

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

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 (
    <Grid>
      {options.map((label) => (
        <Radio
          key={label}
          label={label}
          checked={selectedOption === label}
          onChange={(e) => setSelectedOption(label)}
          name="radioDemo"
        />
      ))}
      <div>Selected: {selectedOption || "[none]"}</div>
    </Grid>
  );
}