Radio

Radio button component for selecting one option from a set. Supports standalone radio buttons, radio buttons styled as buttons, and grouped radio buttons with layout configuration.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <Radio
      value="radio1"
    >
      Radio
    </Radio>
  );
}

Result

Loading...

Radio Button Variants

Live Editor

function RadioButtonDemo() {
  const [value, setValue] = React.useState('line');
  return (
    <Radio.Group value={value} onChange={e => setValue(e.target.value)}>
      <Radio.Button value="line">Line Chart</Radio.Button>
      <Radio.Button value="bar">Bar Chart</Radio.Button>
      <Radio.Button value="pie">Pie Chart</Radio.Button>
    </Radio.Group>
  );
}

Result

Loading...

Vertical Radio Group

Live Editor

function VerticalDemo() {
  const [value, setValue] = React.useState('option1');
  return (
    <Radio.Group value={value} onChange={e => setValue(e.target.value)}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <Radio value="option1">First option</Radio>
        <Radio value="option2">Second option</Radio>
        <Radio value="option3">Third option</Radio>
      </div>
    </Radio.Group>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
value	string	"radio1"	The value associated with this radio button.
disabled	boolean	false	Whether the radio button is disabled.
checked	boolean	false	Whether the radio button is checked (controlled mode).
children	string	"Radio"	Label text displayed next to the radio button.

Import

import { Radio } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.