Radio group

Overview

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

Preview

Light mode

Dark mode

Code

<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

npx nativecn-ui add RadioGroup

Manual

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>