Skip to main content

​
Overview

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

Light mode

Dark mode

​
Installation

  • CLI
  • Manual
npx nativecn-ui add RadioGroup

​
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>