Radio

Radio buttons allow users to select exactly one option from a set. Use when users need to see all options at once.

Preview

States

Unselected

<Radio
  selected={false}
  onSelect={() => setValue('option')}
  accessibilityLabel="Option"
/>

Selected

<Radio
  selected={true}
  onSelect={() => setValue('option')}
  accessibilityLabel="Option"
/>

Sizes

Size	Outer	Inner	Usage
`sm`	16px	8px	Compact lists
`md`	20px	10px	Default
`lg`	24px	12px	Prominent choices

Disabled

Disabled selected

<Radio
  selected={false}
  disabled
  onSelect={() => {}}
  accessibilityLabel="Unavailable option"
/>

Radio Group

Use RadioGroup to manage selection state for multiple options.

Three Coins

Yarrow Stalks

Plum Blossom

import { RadioGroup, RadioGroupItem } from '@synchronicity/react-native';

function CastingMethodPicker() {
  const [method, setMethod] = useState('three-coins');

  return (
    <RadioGroup value={method} onValueChange={setMethod}>
      <View style={styles.option}>
        <RadioGroupItem
          value="three-coins"
          accessibilityLabel="Three Coins method"
        />
        <Text>Three Coins</Text>
      </View>
      <View style={styles.option}>
        <RadioGroupItem
          value="yarrow"
          accessibilityLabel="Yarrow Stalks method"
        />
        <Text>Yarrow Stalks</Text>
      </View>
      <View style={styles.option}>
        <RadioGroupItem
          value="plum"
          accessibilityLabel="Plum Blossom method"
        />
        <Text>Plum Blossom</Text>
      </View>
    </RadioGroup>
  );
}

API Reference

Radio Props

Prop	Type	Default	Description
`selected`	`boolean`	Required	Whether selected
`onSelect`	`() => void`	Required	Selection handler
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Radio size
`disabled`	`boolean`	`false`	Disable interaction
`style`	`ViewStyle`	-	Custom styles
`accessibilityLabel`	`string`	Required	A11y label

RadioGroup Props

Prop	Type	Description
`value`	`string`	Currently selected value
`onValueChange`	`(value: string) => void`	Change handler
`children`	`ReactNode`	RadioGroupItem elements
`style`	`ViewStyle`	Custom styles

RadioGroupItem Props

Prop	Type	Default	Description
`value`	`string`	Required	Option value
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Radio size
`disabled`	`boolean`	`false`	Disable this option
`accessibilityLabel`	`string`	Required	A11y label

Complete Example

import { RadioGroup, RadioGroupItem, Card, Text } from '@synchronicity/react-native';
import { View, StyleSheet } from 'react-native';
import { useState } from 'react';

function ThemeSelector() {
  const [theme, setTheme] = useState('dark');

  const themes = [
    { value: 'light', label: 'Light', description: 'Classic light appearance' },
    { value: 'dark', label: 'Dark', description: 'Easy on the eyes' },
    { value: 'oled', label: 'OLED', description: 'True black for OLED screens' },
    { value: 'system', label: 'System', description: 'Follow device setting' },
  ];

  return (
    <Card>
      <Text style={styles.title}>Appearance</Text>
      <RadioGroup value={theme} onValueChange={setTheme}>
        {themes.map(option => (
          <View key={option.value} style={styles.option}>
            <RadioGroupItem
              value={option.value}
              accessibilityLabel={option.label}
            />
            <View style={styles.optionText}>
              <Text style={styles.optionLabel}>{option.label}</Text>
              <Text style={styles.optionDesc}>{option.description}</Text>
            </View>
          </View>
        ))}
      </RadioGroup>
    </Card>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 16,
  },
  option: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 12,
    paddingVertical: 12,
  },
  optionText: {
    flex: 1,
  },
  optionLabel: {
    fontSize: 16,
    fontWeight: '500',
  },
  optionDesc: {
    fontSize: 14,
    color: '#8a8a9a',
    marginTop: 2,
  },
});