Accordion

A collapsible list of sections, controlled via openValues. Built from Accordion.Root and Accordion.Item.

Basic usage

A token-driven React Native component library.

Yes, via VajraProvider and design tokens.

Items expose accessibilityRole and accessibilityState.

function AccordionExample() {
  const [openValues, setOpenValues] = useState<string[]>(['a']);

  return (
    <Accordion.Root openValues={openValues} onChange={setOpenValues}>
      <Accordion.Item value="a" title="What is vajra-ui?">
        <Text variant="body">A token-driven React Native component library.</Text>
      </Accordion.Item>
      <Accordion.Item value="b" title="Does it support theming?">
        <Text variant="body">Yes, via VajraProvider and design tokens.</Text>
      </Accordion.Item>
      <Accordion.Item value="c" title="Is it accessible?">
        <Text variant="body">Items expose accessibilityRole and accessibilityState.</Text>
      </Accordion.Item>
    </Accordion.Root>
  );
}

Multiple open items

By default only one item can be open at a time. Pass allowMultiple to let several sections stay open simultaneously.

Content A

Content B

Content C

<Accordion.Root openValues={openValues} onChange={setOpenValues} allowMultiple>
  <Accordion.Item value="a" title="Section A">
    <Text variant="body">Content A</Text>
  </Accordion.Item>
  <Accordion.Item value="b" title="Section B">
    <Text variant="body">Content B</Text>
  </Accordion.Item>
  <Accordion.Item value="c" title="Section C (disabled)" isDisabled>
    <Text variant="body">Content C</Text>
  </Accordion.Item>
</Accordion.Root>

Custom icon

By default the trigger row shows a plain ▲/▼ glyph. Pass icon on Accordion.Item to use a real icon instead: any component matching TVajraIconComponent, rotated 180° between open/closed state.

A token-driven React Native component library.

import { ChevronDownIcon } from '@devraj-labs/vajra-ui-icons';

<Accordion.Item value="a" title="What is vajra-ui?" icon={ChevronDownIcon}>
  <Text variant="body">A token-driven React Native component library.</Text>
</Accordion.Item>

Props

Accordion.Root Props

Prop	Type	Default	Description
openValues	string[]		Required. Which item values are currently open. Controlled.
onChange	(openValues: string[]) => void		Required. Called with the next open values when an item is toggled.
allowMultiple	boolean	false	Allow more than one item open at once.
children	ReactNode		Required. Accordion.Item elements.

Accordion.Item Props

Prop	Type	Default	Description
value	string		Required. Unique identifier matched against openValues.
title	string		Required. Header text shown in the pressable trigger row.
children	ReactNode		Required. Collapsible content, height-animated on open/close.
isDisabled	boolean	false	Prevents toggling and dims the trigger.
icon	TVajraIconComponent		Icon shown at the trailing edge, rotated between open/closed state. Defaults to a plain ▲/▼ glyph.
testID	string		Forwarded to the trigger Pressable.