Saaj UI

Radio Group

Displays a group of radio buttons.

Preview

Installation

npx saaj add RadioGroup

Usage

MyRadioGroup.tsx
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],
  },
}))

On this page