Acronis UIKit
Components

Radio

Mutually exclusive selection within a group.

Usage

import { RadioGroup, Radio } from '@acronis-platform/ui-react';

RadioGroup and Radio wrap Base UI's RadioGroup / Radio primitives — keyboard arrow navigation, focus management, and ARIA come from Base UI. The group owns the selected value; each Radio takes a value. Styled by the --ui-radio-* tokens.

Examples

A basic uncontrolled group:

<RadioGroup defaultValue="weekly">
  <label>
    <Radio value="daily" /> Daily
  </label>
  <label>
    <Radio value="weekly" /> Weekly
  </label>
  <label>
    <Radio value="monthly" /> Monthly
  </label>
</RadioGroup>

Controlled:

const [value, setValue] = React.useState('weekly');

<RadioGroup value={value} onValueChange={setValue}>
  <label>
    <Radio value="daily" /> Daily
  </label>
  <label>
    <Radio value="weekly" /> Weekly
  </label>
</RadioGroup>

A disabled option:

<RadioGroup defaultValue="daily">
  <label>
    <Radio value="daily" /> Daily
  </label>
  <label>
    <Radio value="weekly" disabled /> Weekly (unavailable)
  </label>
</RadioGroup>

API Reference

RadioGroup

Prop

Type

Radio

Prop

Type

Edit on GitHub

On this page