Skip to content

Radio Group Primitive

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

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/radio-group
import * as React from 'react';
import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
import { Text, View } from 'react-native';
function Example() {
const [value, setValue] = React.useState('Comfortable');
function onLabelPress(label: string) {
return () => {
setValue(label);
};
}
return (
<RadioGroupPrimitive.Root value={value} onValueChange={setValue}>
<View>
<RadioGroupPrimitive.Item value='Default' aria-labelledby='default-label'>
<RadioGroupPrimitive.Indicator />
</RadioGroupPrimitive.Item>
<Text nativeID='default-label' onPress={onLabelPress('Default')}>Default</Text>
</View>
<View>
<RadioGroupPrimitive.Item value='Comfortable' aria-labelledby='comfortable-label'>
<RadioGroupPrimitive.Indicator />
</RadioGroupPrimitive.Item>
<Text nativeID='comfortable-label' onPress={onLabelPress('Comfortable')}>Comfortable</Text>
</View>
<View>
<RadioGroupPrimitive.Item value='Compact' aria-labelledby='compact-label'>
<RadioGroupPrimitive.Indicator />
</RadioGroupPrimitive.Item>
<Text nativeID='compact-label' onPress={onLabelPress('Compact')}>Compact</Text>
</View>
</RadioGroupPrimitive.Root>
);
}

Extends View props

PropTypeNote
valuestring | undefined
onValueChange(val: string) => void
asChildboolean(optional)
disabledboolean(optional)

Extends Pressable props

PropTypeNote
valuestring
aria-labelledbystringIts label’s nativeID
asChildboolean(optional)

Extends View props

PropTypeNote
forceMountboolean(optional)
asChildboolean(optional)