Component

Radio

Radio control for mutually exclusive selections.

React Native

Radio group

Use one selected value per option set.

standard

express

import { useState } from 'react';
import { View } from 'react-native';
import { Radio, Text, useTheme } from '@sohantalukder/rn-kit';

export function PlanOptions() {
  const [plan, setPlan] = useState('standard');
  const { gutters, layout } = useTheme();

  return (
    <View style={gutters.gap_12}>
      <View style={[layout.row, layout.itemsCenter, gutters.gap_10]}>
        <Radio
          checked={plan === 'standard'}
          accessibilityLabel="Standard plan"
          onChange={() => setPlan('standard')}
        />
        <Text>Standard</Text>
      </View>
      <View style={[layout.row, layout.itemsCenter, gutters.gap_10]}>
        <Radio
          checked={plan === 'priority'}
          accessibilityLabel="Priority plan"
          onChange={() => setPlan('priority')}
        />
        <Text>Priority</Text>
      </View>
    </View>
  );
}

Live component

unselectedselecteddisabled

Use radios for small visible option sets.
Use one selected value per group.

Usage

import { Radio } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { View } from 'react-native';
import { Radio, Text, useTheme } from '@sohantalukder/rn-kit';

export function PlanOptions() {
  const [plan, setPlan] = useState('standard');
  const { gutters, layout } = useTheme();

  return (
    <View style={gutters.gap_12}>
      <View style={[layout.row, layout.itemsCenter, gutters.gap_10]}>
        <Radio
          checked={plan === 'standard'}
          accessibilityLabel="Standard plan"
          onChange={() => setPlan('standard')}
        />
        <Text>Standard</Text>
      </View>
      <View style={[layout.row, layout.itemsCenter, gutters.gap_10]}>
        <Radio
          checked={plan === 'priority'}
          accessibilityLabel="Priority plan"
          onChange={() => setPlan('priority')}
        />
        <Text>Priority</Text>
      </View>
    </View>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

checkedbooleanfalseMarks the control as selected and updates its visual state.

disabledbooleanfalsePrevents interaction and renders the disabled visual state.

onChange(value: boolean) => void-Called when the radio option is selected.

Theme

Radio reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

unselected
selected
disabled

Best Practices

Use radios for small visible option sets.
Use one selected value per group.