Radio

Stable

Single-choice input control with group orchestration.

Installation

npm install @xaui/native

Import

import { Radio, RadioGroup } from '@xaui/native/radio'

Basic Usage

Minimal example showing the component with its default configuration.

import { Radio } from '@xaui/native/radio'

export function Example() {
  return <Radio />
}

Basic Radio

A standalone radio button.

import { Radio } from '@xaui/native/radio'

export function BasicExample() {
  return <Radio label="Option A" />
}

Radio Group

Group multiple radios with single-selection behavior.

import { useState } from 'react'
import { Radio, RadioGroup } from '@xaui/native/radio'

export function GroupExample() {
  const [value, setValue] = useState('monthly')

  return (
    <RadioGroup value={value} onValueChange={setValue}>
      <Radio label="Monthly" value="monthly" />
      <Radio label="Yearly" value="yearly" />
      <Radio label="Lifetime" value="lifetime" />
    </RadioGroup>
  )
}

Horizontal Layout

Display radios side by side.

import { Radio, RadioGroup } from '@xaui/native/radio'

export function HorizontalExample() {
  return (
    <RadioGroup orientation="horizontal">
      <Radio label="Yes" value="yes" />
      <Radio label="No" value="no" />
    </RadioGroup>
  )
}

Sizes

Use sm, md, and lg radio sizes.

import { Radio } from '@xaui/native/radio'
import { Column } from '@xaui/native/view'

export function RadioSizesExample() {
  return (
    <Column gap={10}>
      <Radio size="sm" label="Small" />
      <Radio size="md" label="Medium" defaultChecked />
      <Radio size="lg" label="Large" />
    </Column>
  )
}

Theme Colors

Apply semantic theme colors on radios and groups.

import { useState } from 'react'
import { Radio, RadioGroup } from '@xaui/native/radio'
import { Column } from '@xaui/native/view'

export function RadioThemeColorsExample() {
  const [value, setValue] = useState('secondary')

  return (
    <Column gap={12}>
      <RadioGroup value={value} onValueChange={setValue} themeColor="primary">
        <Radio label="Primary group color" value="primary" />
        <Radio label="Secondary group color" value="secondary" />
      </RadioGroup>

      <Radio label="Success single radio" themeColor="success" />
      <Radio label="Danger single radio" themeColor="danger" />
    </Column>
  )
}