Tac UI — Cross-Platform Design System

Import

tsx

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@tac-ui/native';

Playground

Interactively configure the Accordion props below.

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that match the design system.

Yes. It uses spring animations for smooth open and close transitions.

Type

tsx

<Accordion type="single" defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>Yes. It comes with default styles that match the design system.</AccordionContent>
  </AccordionItem>
</Accordion>

Single (one open at a time)

In single mode only one item can be open at a time; opening a new item collapses the previously open one. Use defaultValue to set the initially open item.

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that match the design system.

Yes. It uses spring animations for smooth open and close transitions.

tsx

<Accordion type="single" defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>Yes. It comes with default styles that match the design system.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>Yes. It uses spring animations for smooth open and close transitions.</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple (many open at once)

In multiple mode, any number of items can be open simultaneously. Pass an array of values to defaultValue to pre-open multiple items.

Content for the first item.

Content for the second item.

Content for the third item.

tsx

<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>First item</AccordionTrigger>
    <AccordionContent>Content for the first item.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Second item</AccordionTrigger>
    <AccordionContent>Content for the second item.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Third item</AccordionTrigger>
    <AccordionContent>Content for the third item.</AccordionContent>
  </AccordionItem>
</Accordion>

Glass

The glass prop applies a semi-transparent background to the accordion container and each item, suitable for overlaying rich backgrounds.

A design style using frosted-glass effects with blur and transparency.

Use glass when the accordion sits on a colorful or image background.

tsx

<Accordion type="single" glass defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is glassmorphism?</AccordionTrigger>
    <AccordionContent>A design style using frosted-glass effects with blur and transparency.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>When should I use it?</AccordionTrigger>
    <AccordionContent>Use glass when the accordion sits on a colorful or image background.</AccordionContent>
  </AccordionItem>
</Accordion>

Without Outline

Setting outline removes the bordered card style and renders items with only a bottom divider, creating a flush list appearance.

Items are separated by a bottom border instead of individual card borders.

Use this style when the accordion is embedded in a surface that already has a border.

The last item's bottom border is hidden automatically.

tsx

<Accordion type="single" outline defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>No border card style</AccordionTrigger>
    <AccordionContent>Items are separated by a bottom border instead of individual card borders.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Flush appearance</AccordionTrigger>
    <AccordionContent>Use this style when the accordion is embedded in a surface that already has a border.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Third item</AccordionTrigger>
    <AccordionContent>The last item's bottom border is hidden automatically.</AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

Accordion uses a composition pattern. The root manages state; AccordionItem, AccordionTrigger, and AccordionContent all require a matching value prop to wire up open/close behavior.

Accordion props:

Prop	Type	Default	Description
type	"single" \| "multiple"	"single"	Whether only one or multiple items can be open at a time.
defaultValue	string[]	[]	The value(s) of items open by default (uncontrolled).
glass	boolean	false	Applies a semi-transparent background to the container and each item.
outline	boolean	false	When true, shows individual card borders. When false, uses a flush bottom-divider style.
style	ViewStyle	-	Additional styles applied to the root container.

AccordionItem props:

Prop	Type	Default	Description
value	string	-	Unique identifier for this accordion item; used to control open state.
style	ViewStyle	-	Additional styles applied to the item container.

AccordionTrigger props:

Prop	Type	Default	Description
children	React.ReactNode	-	Label text displayed in the trigger button.
style	ViewStyle	-	Additional styles applied to the trigger.

AccordionContent props:

Prop	Type	Default	Description
children	React.ReactNode	-	Content revealed when the accordion item is open.
style	ViewStyle	-	Additional styles applied to the content container.