title: Radio subtitle: A radio button for single selection. description: A cross-platform React radio button component for selecting one option from a group.

Radio

A cross-platform React radio button component for selecting one option from a group. Works standalone or with RadioGroup for coordinated selection.

Installation

npm install @xsolla/xui-radio
# or
yarn add @xsolla/xui-radio

Demo

Basic Radio

import * as React from 'react';
import { Radio } from '@xsolla/xui-radio';

export default function BasicRadio() {
  const [selected, setSelected] = React.useState('');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Radio
        checked={selected === 'option1'}
        onPress={() => setSelected('option1')}
        label="Option 1"
      />
      <Radio
        checked={selected === 'option2'}
        onPress={() => setSelected('option2')}
        label="Option 2"
      />
      <Radio
        checked={selected === 'option3'}
        onPress={() => setSelected('option3')}
        label="Option 3"
      />
    </div>
  );
}

Radio with Description

import * as React from 'react';
import { Radio } from '@xsolla/xui-radio';

export default function RadioWithDescription() {
  const [plan, setPlan] = React.useState('basic');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Radio
        checked={plan === 'basic'}
        onPress={() => setPlan('basic')}
        label="Basic Plan"
        description="Best for individuals, includes core features"
      />
      <Radio
        checked={plan === 'pro'}
        onPress={() => setPlan('pro')}
        label="Pro Plan"
        description="Best for teams, includes advanced features"
      />
      <Radio
        checked={plan === 'enterprise'}
        onPress={() => setPlan('enterprise')}
        label="Enterprise Plan"
        description="Custom solutions for large organizations"
      />
    </div>
  );
}

Radio Sizes

import * as React from 'react';
import { Radio } from '@xsolla/xui-radio';

export default function RadioSizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Radio size="sm" label="Small radio" checked />
      <Radio size="md" label="Medium radio (default)" checked />
      <Radio size="lg" label="Large radio" checked />
      <Radio size="xl" label="Extra large radio" checked />
    </div>
  );
}

Anatomy

Import the component and use it directly:

import { Radio } from '@xsolla/xui-radio';

<Radio
  checked={isSelected}          // Whether this radio is selected
  onPress={handleSelect}        // Click/tap handler
  onValueChange={handleChange}  // Value change handler
  value="option1"               // Value for RadioGroup context
  label="Option label"          // Label text
  description="Help text"       // Description below label
  errorLabel="Error text"       // Error message
  state="default"               // Visual state
  size="md"                      // Size variant
/>

Examples

Error State

import * as React from 'react';
import { Radio } from '@xsolla/xui-radio';

export default function ErrorRadio() {
  return (
    <Radio
      checked={false}
      state="error"
      label="Select this option"
      errorLabel="Please make a selection"
    />
  );
}

Disabled Radio

import * as React from 'react';
import { Radio } from '@xsolla/xui-radio';

export default function DisabledRadio() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Radio state="disable" label="Disabled unchecked" />
      <Radio state="disable" checked label="Disabled checked" />
    </div>
  );
}

API Reference

Radio

A single radio button component.

Radio Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | checked | boolean | false | Whether the radio button is selected. | | value | string | - | Value used when within RadioGroup. | | size | "sm" \| "md" \| "lg" \| "xl" | "md" | Size of the radio button. | | state | "default" \| "hover" \| "disable" \| "error" | "default" | Visual state of the radio. | | label | string | - | Label text displayed next to the radio. | | description | string | - | Description text below the label. | | errorLabel | string | - | Error message when state is "error". | | onPress | () => void | - | Callback when the radio is pressed. | | onValueChange | (value: boolean) => void | - | Callback when checked state changes. | | aria-label | string | - | Accessible label for screen readers. | | aria-labelledby | string | - | ID of element that labels this radio. |

Theming

Radio uses the design system theme for colors:

// Colors accessed via theme
theme.colors.control.radio.bg              // Unchecked background
theme.colors.control.radio.bgChecked       // Checked background
theme.colors.control.radio.border          // Border color
theme.colors.control.radio.borderChecked   // Checked border
theme.colors.control.radio.dot             // Inner dot color
theme.colors.content.primary               // Label text
theme.colors.content.secondary             // Description text
theme.colors.content.error                 // Error text

Accessibility

• Uses role="radio" with proper ARIA attributes
• aria-checked reflects selection state
• Keyboard support (Space to select)
• Focus indicator follows WCAG guidelines
• Works with RadioGroup for proper group semantics