Radio Group

Radio Group Primitive

Demo

A group of selectable buttons, commonly referred to as radio buttons, wherein only one button can be checked simultaneously.

Installation

CLI

npx @react-native-reusables/cli@latest add radio-group

Manual

Dependencies

Before copy/pasting, add the radio group primitive to your project.

Copy/paste the following code to ~/components/ui/radio-group.tsx:

Usage

import * as React from 'react';
import { View } from 'react-native';
import { Label } from '~/components/ui/label';
import { RadioGroup, RadioGroupItem } from '~/components/ui/radio-group';

function Example() {
  const [value, setValue] = React.useState('Comfortable');

  function onLabelPress(label: string) {
    return () => {
      setValue(label);
    };
  }
  return (
    <View className='flex-1 justify-center items-center p-6'>
      <RadioGroup value={value} onValueChange={setValue} className='gap-3'>
        <RadioGroupItemWithLabel value='Default' onLabelPress={onLabelPress('Default')} />
        <RadioGroupItemWithLabel value='Comfortable' onLabelPress={onLabelPress('Comfortable')} />
        <RadioGroupItemWithLabel value='Compact' onLabelPress={onLabelPress('Compact')} />
      </RadioGroup>
    </View>
  );
}

function RadioGroupItemWithLabel({
  value,
  onLabelPress,
}: {
  value: string;
  onLabelPress: () => void;
}) {
  return (
    <View className={'flex-row gap-2 items-center'}>
      <RadioGroupItem aria-labelledby={`label-for-${value}`} value={value} />
      <Label nativeID={`label-for-${value}`} onPress={onLabelPress}>
        {value}
      </Label>
    </View>
  );
}

Props

RadioGroup

Extends View props

Prop	Type	Note
value	string | undefined
onValueChange	(val: string) => void
asChild	boolean	(optional)
disabled	boolean	(optional)

RadioGroupItem

Extends Pressable props

Prop	Type	Note
value	string
aria-labelledby	string	Its label’s nativeID
asChild	boolean	(optional)