RadioCards

Card-style radio selection component.

RadioCards

RadioCards provides a card-style interface for selecting a single option from a group.

Import

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

Usage

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

<RadioCards.Root value={value} onValueChange={setValue}>
  <RadioCards.Item value="1">
    <Flex direction="column">
      <Text weight="medium">Option 1</Text>
      <Text size={2} color="gray">Description here</Text>
    </Flex>
  </RadioCards.Item>
  <RadioCards.Item value="2">
    <Flex direction="column">
      <Text weight="medium">Option 2</Text>
      <Text size={2} color="gray">Description here</Text>
    </Flex>
  </RadioCards.Item>
</RadioCards.Root>

Props

RadioCards.Root

RadioCards.Item

Animation

Radio card items include subtle press animations for a tactile feel:

• Press Animation: Cards scale down slightly (0.975x) when pressed

Examples

Basic Cards

<RadioCards.Root value={value} onValueChange={setValue}>
  <RadioCards.Item value="small">
    <Text>Small</Text>
  </RadioCards.Item>
  <RadioCards.Item value="medium">
    <Text>Medium</Text>
  </RadioCards.Item>
  <RadioCards.Item value="large">
    <Text>Large</Text>
  </RadioCards.Item>
</RadioCards.Root>

Plan Selection

<RadioCards.Root value={plan} onValueChange={setPlan}>
  <RadioCards.Item value="starter">
    <Flex direction="column" gap={1}>
      <Text weight="medium">Starter</Text>
      <Text size={2} color="gray">For individuals</Text>
      <Text size={4} weight="bold">$9/mo</Text>
    </Flex>
  </RadioCards.Item>
  <RadioCards.Item value="pro">
    <Flex direction="column" gap={1}>
      <Flex align="center" gap={2}>
        <Text weight="medium">Pro</Text>
        <Badge color="green">Popular</Badge>
      </Flex>
      <Text size={2} color="gray">For teams</Text>
      <Text size={4} weight="bold">$29/mo</Text>
    </Flex>
  </RadioCards.Item>
  <RadioCards.Item value="enterprise">
    <Flex direction="column" gap={1}>
      <Text weight="medium">Enterprise</Text>
      <Text size={2} color="gray">For organizations</Text>
      <Text size={4} weight="bold">Custom</Text>
    </Flex>
  </RadioCards.Item>
</RadioCards.Root>

Grid Layout

<RadioCards.Root columns={2} value={value} onValueChange={setValue}>
  <RadioCards.Item value="1">Option 1</RadioCards.Item>
  <RadioCards.Item value="2">Option 2</RadioCards.Item>
  <RadioCards.Item value="3">Option 3</RadioCards.Item>
  <RadioCards.Item value="4">Option 4</RadioCards.Item>
</RadioCards.Root>

Related

• Radio - Individual radio button
• RadioGroup - Radio button group
• CheckboxCards - Card-style checkboxes