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.

​
CheckboxCards

CheckboxCards provides a card-style interface for selecting multiple options.

​
Import

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

​
Usage

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

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

​
Props

​
CheckboxCards.Root

​
CheckboxCards.Item

​
Animation & Haptics

Checkbox card items include subtle press animations and haptic feedback for a tactile feel:
  • Press Animation: Cards scale down slightly (0.97x) when pressed
  • Haptic Feedback: 10ms vibration when an item is selected (enabled by default)
Disable haptic feedback on individual items: 
<CheckboxCards.Root value={selected} onValueChange={setSelected}>
  <CheckboxCards.Item value="email" hapticFeedback={false}>
    <Text>No haptic feedback</Text>
  </CheckboxCards.Item>
  <CheckboxCards.Item value="sms">
    <Text>With haptic feedback</Text>
  </CheckboxCards.Item>
</CheckboxCards.Root>

​
Examples

​
Basic Cards

<CheckboxCards.Root value={selected} onValueChange={setSelected}>
  <CheckboxCards.Item value="email">
    <Text>Email notifications</Text>
  </CheckboxCards.Item>
  <CheckboxCards.Item value="sms">
    <Text>SMS notifications</Text>
  </CheckboxCards.Item>
  <CheckboxCards.Item value="push">
    <Text>Push notifications</Text>
  </CheckboxCards.Item>
</CheckboxCards.Root>

​
With Descriptions

<CheckboxCards.Root value={selected} onValueChange={setSelected}>
  <CheckboxCards.Item value="starter">
    <Flex direction="column" gap={1}>
      <Text weight="medium">Starter Plan</Text>
      <Text size={2} color="gray">Perfect for individuals</Text>
      <Text size={3} weight="bold">$9/month</Text>
    </Flex>
  </CheckboxCards.Item>
  <CheckboxCards.Item value="pro">
    <Flex direction="column" gap={1}>
      <Text weight="medium">Pro Plan</Text>
      <Text size={2} color="gray">Best for small teams</Text>
      <Text size={3} weight="bold">$29/month</Text>
    </Flex>
  </CheckboxCards.Item>
</CheckboxCards.Root>

​
Grid Layout

<CheckboxCards.Root columns={2} value={selected} onValueChange={setSelected}>
  <CheckboxCards.Item value="1">Option 1</CheckboxCards.Item>
  <CheckboxCards.Item value="2">Option 2</CheckboxCards.Item>
  <CheckboxCards.Item value="3">Option 3</CheckboxCards.Item>
  <CheckboxCards.Item value="4">Option 4</CheckboxCards.Item>
</CheckboxCards.Root>