Radio

A radio button component that allows users to select a single option from a group.

function RadioExample() {
  const [selectedOption, setSelectedOption] = useState('option1');

  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Radio
        name="example"
        value="option1"
        checked={selectedOption === 'option1'}
        onChange={(e) => setSelectedOption(e.target.value)}
      />
      <Radio
        name="example"
        value="option2"
        checked={selectedOption === 'option2'}
        onChange={(e) => setSelectedOption(e.target.value)}
      />
    </div>
  );
}

Props

value

required

Typestring | number

The value of the radio button

name

required

Typestring

The name of the radio button group

checked

Typeboolean

Whether the radio button is checked

onChange

Typesignature

Callback fired when the radio button state changes

size

TypeSelectorSize

Default'medium'

The size of the radio button

CSS Variables

Color

--ax-public-radio-bg

--ax-public-radio-border-color

--ax-public-radio-checked-bg

--ax-public-radio-disabled-bg

--ax-public-radio-disabled-border-color

--ax-public-radio-disabled-dot-color

--ax-public-radio-dot-color

--ax-public-radio-focus-border-color

Radius

--ax-public-radio-border-radius