Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
RadioGroup

RadioGroup is a component for managing a group of radio buttons where only one can be selected. It uses the compound component pattern for better flexibility and consistency with other components.

​
Import

import { RadioGroup } from 'radix-native-ui';

​
Anatomy

<RadioGroup.Root>
  <RadioGroup.Item value="option1">Option 1</RadioGroup.Item>
  <RadioGroup.Item value="option2">Option 2</RadioGroup.Item>
</RadioGroup.Root>

​
Props

​
Root

​
Item

​
Examples

​
Basic Group

<RadioGroup.Root value={value} onValueChange={setValue}>
  <RadioGroup.Item value="apple" label="Apple" />
  <RadioGroup.Item value="banana" label="Banana" />
  <RadioGroup.Item value="orange" label="Orange" />
</RadioGroup.Root>

​
With Label

<Flex direction="column" gap={2}>
  <Text weight="medium">Select your favorite fruit:</Text>
  <RadioGroup.Root value={value} onValueChange={setValue}>
    <RadioGroup.Item value="apple" label="Apple" />
    <RadioGroup.Item value="banana" label="Banana" />
    <RadioGroup.Item value="orange" label="Orange" />
  </RadioGroup.Root>
</Flex>

​
Custom Content

<RadioGroup.Root value={method} onValueChange={setMethod}>
  <RadioGroup.Item value="card">
    <Flex direction="row" gap={2} align="center">
      <Icon name="credit-card" />
      <Text>Credit Card</Text>
    </Flex>
  </RadioGroup.Item>
  <RadioGroup.Item value="paypal">
    <Flex direction="row" gap={2} align="center">
      <Icon name="paypal" />
      <Text>PayPal</Text>
    </Flex>
  </RadioGroup.Item>
</RadioGroup.Root>

​
Disabled Group

<RadioGroup.Root disabled defaultValue="1">
  <RadioGroup.Item value="1" label="Option 1" />
  <RadioGroup.Item value="2" label="Option 2" />
</RadioGroup.Root>

​
Disabled Item

<RadioGroup.Root value={value} onValueChange={setValue}>
  <RadioGroup.Item value="1" label="Option 1" />
  <RadioGroup.Item value="2" label="Option 2" disabled />
  <RadioGroup.Item value="3" label="Option 3" />
</RadioGroup.Root>

​
With Styling

<RadioGroup.Root
  value={value}
  onValueChange={setValue}
  color="indigo"
  variant="surface"
  size="3"
  gap={12}
>
  <RadioGroup.Item value="1" label="Surface Indigo" />
  <RadioGroup.Item value="2" label="Another Option" />
</RadioGroup.Root>