import { StoryWithControls } from '../../../src/components/StorybookWrapper';

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

<StoryWithControls component="Radio" props={{ value: "radio1", disabled: false, checked: false, children: "Radio" }} controls={[ { name: "value", label: "Value", type: "text", description: "The value associated with this radio button." }, { name: "disabled", label: "Disabled", type: "boolean", description: "Whether the radio button is disabled." }, { name: "checked", label: "Checked", type: "boolean", description: "Whether the radio button is checked (controlled mode)." }, { name: "children", label: "Children", type: "text", description: "Label text displayed next to the radio button." } ]} />

Try It

Edit the code below to experiment with the component:

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

Radio Button Variants

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

Vertical Radio Group

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

Props

Import

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

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::