Radio group

Overview

RadioGroup is a set of flexible React Native components designed for creating radio buttons.

• Preview
• Code

Light mode

Dark mode

Light mode

Dark mode

<RadioGroup defaultValue="dark">
  <RadioGroupItem value="light" label="Light" />
  <RadioGroupItem value="dark" label="Dark" />
  <View className="flex flex-row items-center gap-2">
    <RadioGroupItem value="system" />
    <RadioGroupLabel value="system">
      <AvatarImage
        className="h-8 w-8 rounded-full"
        source={{
          uri: 'https://avatars.githubusercontent.com/u/75042455?s=200&v=4',
        }}
      />
    </RadioGroupLabel>
  </View>
</RadioGroup>

Installation

• CLI
• Manual

npx nativecn-ui add RadioGroup

npx nativecn-ui add RadioGroup

1

First Step

Install the dependencies

yarn add react-native-svg lucide-react-native

2

Second Step

Include RadioGroup.tsx in your project.

3

Third Step

Update the import paths to match your project setup.

API

RadioGroup

• defaultValue: string - The default value of the radio group.

RadioGroupItem

• value: boolean - The value of the button.
• label?: string (optional) - The label of the button (rendered as <Text>).
• labelClasses?: string (optional) - The classes for the label.
• className?: string (optional) - The classes for the switch.

RadioGroupLabel

• value: string - The value of the label (needs to match the value of the radio group item).
• className?: string (optional) - The classes for the label.

Usage

<RadioGroup defaultValue="dark">
  <RadioGroupItem value="light" label="Light" />
  <RadioGroupItem value="dark" label="Dark" />
  <View className="flex flex-row items-center gap-2">
    <RadioGroupItem value="system" />
    <RadioGroupLabel value="system">
      <AvatarImage
        className="h-8 w-8 rounded-full"
        source={{
          uri: 'https://avatars.githubusercontent.com/u/75042455?s=200&v=4',
        }}
      />
    </RadioGroupLabel>
  </View>
</RadioGroup>