Radio

Radio button with animated indicator and label. Use standalone or inside RadioGroup for managed selection.

Import

import { Radio, RadioGroup } from 'reablocks';

Radio Props

Renders with role="radio", aria-checked, keyboard support (Space).

Standalone Usage

const [checked, setChecked] = useState(false);
<Radio checked={checked} label="Option A" onChange={setChecked} />

RadioGroup

Manages selection across multiple Radio buttons via React Context.

RadioGroup Props

RadioGroup Usage

const [value, setValue] = useState('option1');

<RadioGroup selectedValue={value} onChange={setValue}>
  <Radio value="option1" label="Option 1" />
  <Radio value="option2" label="Option 2" />
  <Radio value="option3" label="Option 3" />
</RadioGroup>

When inside a RadioGroup, each Radio's checked state is determined by comparing its value to the group's selectedValue.

RadioTheme Interface

interface RadioTheme {
  base: string;
  radio: { base: string; disabled: string; checked: string };
  indicator: {
    base: string;
    disabled: string;
    sizes: { small, medium, large };
  };
  label: { base: string; clickable: string; checked: string; disabled: string };
  sizes: { small, medium, large };
}