Radio

Radio buttons allow users to select one option from a set of mutually exclusive options.

Import

import { Radio } from '@md3-react/core';

Basic Usage

Live Editor

function Example() {
  const [value, setValue] = React.useState('option1');
  return (
    <Demo>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
        <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Radio 
            name="example" 
            value="option1" 
            checked={value === 'option1'}
            onChange={(e) => setValue(e.target.value)}
          />
          <span>Option 1</span>
        </label>
        <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Radio 
            name="example" 
            value="option2"
            checked={value === 'option2'}
            onChange={(e) => setValue(e.target.value)}
          />
          <span>Option 2</span>
        </label>
        <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Radio 
            name="example" 
            value="option3"
            checked={value === 'option3'}
            onChange={(e) => setValue(e.target.value)}
          />
          <span>Option 3</span>
        </label>
      </div>
    </Demo>
  );
}

Result

Loading...

Disabled State

Live Editor

<Demo>
  <div style={{ display: 'flex', gap: '24px' }}>
    <Radio disabled aria-label="Disabled unselected" />
    <Radio disabled checked onChange={() => {}} aria-label="Disabled selected" />
  </div>
</Demo>

Result

Loading...

Props

Prop	Type	Default	Description
checked	boolean	-	Controlled checked state
name	string	-	Groups radios together
value	string	-	Value submitted with form
disabled	boolean	false	Disables the radio button
onChange	function	-	Called when selection changes

Plus all standard <input type="radio"> HTML attributes.

Accessibility

• Uses native <input type="radio"> for proper semantics
• name attribute groups radios for keyboard navigation
• Arrow keys navigate between options in a group