RadioGroup

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

RadioGroup renders a <fieldset>; label becomes its legend. Each item is a Radio with its value in value.

Group label

Choose one option.

First option

Second option

Third option

LightDark

Copy code

import { Radio, RadioGroup } from '@bigbang/ui';

export default function Default() {
  return (
    <RadioGroup label="Group label" description="Choose one option." defaultValue="one">
      <Radio value="one" label="First option" />
      <Radio value="two" label="Second option" />
      <Radio value="three" label="Third option" />
    </RadioGroup>
  );
}

Items with descriptions

The Radio description sits under the label and is linked to the item with aria-describedby.

Group label

First optionOption description goes here.

Second optionOption description goes here.

LightDark

Copy code

import { Radio, RadioGroup } from '@bigbang/ui';

export default function WithDescriptions() {
  return (
    <RadioGroup label="Group label" defaultValue="one">
      <Radio value="one" label="First option" description="Option description goes here." />
      <Radio value="two" label="Second option" description="Option description goes here." />
    </RadioGroup>
  );
}

Controlled and horizontal

With value and onValueChange you hold the choice. orientation="horizontal" lays short options in a row.

Group label

First option

Second option

Third option

one

LightDark

Copy code

import { Radio, RadioGroup } from '@bigbang/ui';
import { useState } from 'react';

export default function Controlled() {
  const [value, setValue] = useState('one');
  return (
    <div className="flex flex-col gap-md">
      <RadioGroup label="Group label" value={value} onValueChange={setValue} orientation="horizontal">
        <Radio value="one" label="First option" />
        <Radio value="two" label="Second option" />
        <Radio value="three" label="Third option" />
      </RadioGroup>
      <code className="type-body-sm text-fg-subtle">{value}</code>
    </div>
  );
}

States

disabled on a Radio turns off that item only; disabled on the RadioGroup turns off the whole group.

Group label

First option

Second option

Group label

First option

Second option

LightDark

Copy code

import { Radio, RadioGroup } from '@bigbang/ui';

export default function States() {
  return (
    <div className="flex flex-col gap-xl">
      <RadioGroup label="Group label" defaultValue="one">
        <Radio value="one" label="First option" />
        <Radio value="two" label="Second option" disabled />
      </RadioGroup>
      <RadioGroup label="Group label" defaultValue="one" disabled>
        <Radio value="one" label="First option" />
        <Radio value="two" label="Second option" />
      </RadioGroup>
    </div>
  );
}

Invalid

With error set, the group gets aria-invalid and every circle shows the danger border.

Group label* required

First option

Second option

Choose an option to continue.

LightDark

Copy code

import { Provider, Radio, RadioGroup } from '@bigbang/ui';

export default function Invalid() {
  return (
    <Provider locale="en-GB">
      <RadioGroup label="Group label" required error="Choose an option to continue.">
        <Radio value="one" label="First option" />
        <Radio value="two" label="Second option" />
      </RadioGroup>
    </Provider>
  );
}

Light and dark mode

A selected circle takes the color-action-primary-default fill.

Light

Group label* required

First option

Second option

Choose an option to continue.

Dark

Group label* required

First option

Second option

Choose an option to continue.

Copy code

import { Provider, Radio, RadioGroup } from '@bigbang/ui';

export default function Invalid() {
  return (
    <Provider locale="en-GB">
      <RadioGroup label="Group label" required error="Choose an option to continue.">
        <Radio value="one" label="First option" />
        <Radio value="two" label="Second option" />
      </RadioGroup>
    </Provider>
  );
}