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.

​
Accordion

Accordion is a disclosure component for creating collapsible content sections that can be expanded or collapsed.

​
Import

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

​
Usage

import { Accordion, Text, Flex } from 'radix-native-ui';

<Accordion.Root type="single" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger>
        <Text>Section 1</Text>
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      <Text>Content for section 1</Text>
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="item-2">
    <Accordion.Header>
      <Accordion.Trigger>
        <Text>Section 2</Text>
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      <Text>Content for section 2</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

​
Components

​
Accordion.Root

The root container component that manages accordion state.

​
Accordion.Item

Individual accordion item.

​
Accordion.Header

Header section containing the trigger.

​
Accordion.Trigger

Button that toggles the accordion item.

​
Accordion.Content

Content that is shown/hidden.

​
Props

​
Accordion.Root

​
Accordion.Item

​
Accordion.Trigger

​
Haptic Feedback

Accordion triggers provide haptic feedback by default when expanded or collapsed. You can disable this with the hapticFeedback prop: 
<Accordion.Root type="single" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger hapticFeedback={false}>
        <Text>No haptic feedback</Text>
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      <Text>Content</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

​
Examples

​
Single Mode

<Accordion.Root type="single" defaultValue="faq-1">
  <Accordion.Item value="faq-1">
    <Accordion.Header>
      <Accordion.Trigger>
        <Text>What is React Native?</Text>
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      <Text>React Native is a framework for building native mobile apps using React.</Text>
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="faq-2">
    <Accordion.Header>
      <Accordion.Trigger>
        <Text>How do I get started?</Text>
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      <Text>Start by installing the CLI and creating a new project.</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

​
Multiple Mode

<Accordion.Root type="multiple" defaultValue={['section-1', 'section-2']}>
  <Accordion.Item value="section-1">
    <Accordion.Header>
      <Accordion.Trigger>Section 1</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      <Text>Both sections can be open at the same time.</Text>
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="section-2">
    <Accordion.Header>
      <Accordion.Trigger>Section 2</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      <Text>This is also open.</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

​
Collapsible

<Accordion.Root type="single" collapsible defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger>Can be collapsed</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      <Text>Click the trigger to collapse this item.</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

​
FAQ Section

<Card>
  <Flex direction="column" gap={3}>
    <Heading size={4}>Frequently Asked Questions</Heading>

    <Accordion.Root type="single" collapsible>
      <Accordion.Item value="q1">
        <Accordion.Header>
          <Accordion.Trigger>
            <Flex direction="row" justify="between" align="center">
              <Text weight="medium">How do I reset my password?</Text>
              <Icon name="chevron-down" />
            </Flex>
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          <Text color="gray">
            Click on "Forgot Password" on the login screen and follow the instructions sent to your email.
          </Text>
        </Accordion.Content>
      </Accordion.Item>

      <Accordion.Item value="q2">
        <Accordion.Header>
          <Accordion.Trigger>
            <Flex direction="row" justify="between" align="center">
              <Text weight="medium">Can I change my email?</Text>
              <Icon name="chevron-down" />
            </Flex>
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          <Text color="gray">
            Yes, go to Settings > Account > Email to update your email address.
          </Text>
        </Accordion.Content>
      </Accordion.Item>

      <Accordion.Item value="q3">
        <Accordion.Header>
          <Accordion.Trigger>
            <Flex direction="row" justify="between" align="center">
              <Text weight="medium">How do I delete my account?</Text>
              <Icon name="chevron-down" />
            </Flex>
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          <Text color="gray">
            Go to Settings > Account > Delete Account. This action cannot be undone.
          </Text>
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  </Flex>
</Card>

​
Settings Accordion

<Accordion.Root type="multiple">
  <Accordion.Item value="appearance">
    <Accordion.Header>
      <Accordion.Trigger>
        <Flex gap={2} align="center">
          <Icon name="palette" />
          <Text weight="medium">Appearance</Text>
        </Flex>
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      <Flex direction="column" gap={3}>
        <Flex direction="row" justify="between" align="center">
          <Text>Dark Mode</Text>
          <Switch />
        </Flex>
        <Flex direction="row" justify="between" align="center">
          <Text>Reduce Motion</Text>
          <Switch />
        </Flex>
      </Flex>
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="notifications">
    <Accordion.Header>
      <Accordion.Trigger>
        <Flex gap={2} align="center">
          <Icon name="bell" />
          <Text weight="medium">Notifications</Text>
        </Flex>
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      <Flex direction="column" gap={3}>
        <Flex direction="row" justify="between" align="center">
          <Text>Push Notifications</Text>
          <Switch />
        </Flex>
        <Flex direction="row" justify="between" align="center">
          <Text>Email Notifications</Text>
          <Switch />
        </Flex>
      </Flex>
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>
  • Tabs - Tabs component
  • Card - Card component