Radio Group
Displays a group of radio buttons.
Preview
Installation
npx saaj add RadioGroupUsage
import { createStyleSheet, useStyles } from 'react-native-unistyles';
import {
RadioGroup,
RadioGroupItem,
RadioGroupIndicator
} from '@/components/ui/RadioGroup';
import { Text } from '@/components/ui/Text';
export function MyRadioGroup() {
const { styles } = useStyles(stylesheet);
return (
<RadioGroup style={styles.radioGroup}>
<Text variant="labelMd" highContrast>
Do you like video games?
</Text>
<RadioGroupItem value="yes" style={styles.item}>
<RadioGroupIndicator />
<Text variant="labelMd" highContrast>
Yes
</Text>
</RadioGroupItem>
<RadioGroupItem value="no" style={styles.item}>
<RadioGroupIndicator />
<Text variant="labelMd" highContrast>
No
</Text>
</RadioGroupItem>
</RadioGroup>
);
}
const stylesheet = createStyleSheet(theme => ({
radioGroup: {
gap: theme.space[8],
},
item: {
flexDirection: 'row',
alignItems: 'center',
gap: theme.space[8],
},
}))