Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Product Information</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<Text>
Our flagship product combines cutting-edge technology with sleek design.
Built with premium materials, it offers unparalleled performance and
reliability.
</Text>
<Text>
Key features include advanced processing capabilities, and an intuitive
user interface designed for both beginners and experts.
</Text>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Shipping Details</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<Text>
We offer worldwide shipping through trusted courier partners. Standard
delivery takes 3-5 business days, while express shipping ensures
delivery within 1-2 business days.
</Text>
<Text>
All orders are carefully packaged and fully insured. Track your shipment
in real-time through our dedicated tracking portal.
</Text>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Return Policy</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<Text>
We stand behind our products with a comprehensive 30-day return policy.
If you're not completely satisfied, simply return the item in its
original condition.
</Text>
<Text>
Our hassle-free return process includes free return shipping and full
refunds processed within 48 hours of receiving the returned item.
</Text>
</AccordionContent>
</AccordionItem>
</Accordion>;
Components
Accordion
Prop | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | - | Required. The content of the accordion. |
type | "single" | "multiple" | "single" | The type of accordion to render. Single only allows one item to be expanded at a time, multiple allows any number of items to be expanded at a time. |
value | string | string[] | - | Controlled value for the accordion (which items are expanded). |
defaultValue | string | string[] | - | Uncontrolled default value for the accordion (which items are expanded). |
onValueChange | (value: string | string[] | null) => void | - | Callback function called when the accordion value changes. |
collapsible | boolean | true | Whether an accordion item can be collapsed manually. Use on the top level Accordion component. |
disabled | boolean | false | Whether all accordion items are disabled. Available on the top level Accordion component and on the AccordionItem component. |
loading | boolean | false | Whether all accordion items are loading. Available on the top level Accordion component and on the AccordionItem component. |
compact | boolean | - | Whether the accordion is in compact mode. |
variant | "shadcn" | "shadow" | "bordered" | "splitted" | "shadcn" | The variant of the accordion. |
borderRadius | "sm" | "md" | "lg" | "xl" | "md" | Sets the border radius of the accordion. |
asChild | boolean | false | If true clones the child and passes all accessibility and functionality props to it. Available on any exported component. |
baseClassName | string | - | Custom tailwind classes to apply to the base accordion component. Takes priority over the className prop. |
Also extends all React Native View
component props.
AccordionItem
Prop | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | - | Required. The content of the accordion item. |
value | string | - | Required. The value of the accordion item (think of this as an id). |
disabled | boolean | - | Whether the accordion item is disabled. This can override the disabled state of the top-level Accordion component. |
loading | boolean | - | Whether the accordion item is loading. This can override the loading state of the top-level Accordion component. |
asChild | boolean | false | If true clones the child and passes all accessibility and functionality props to it. Available on any exported component. |
startContent | React.ReactNode | - | Start content (ReactNode) to display in accordion triggers. |
baseClassName | string | - | Custom tailwind classes to apply to the base accordion item component. Takes priority over the className prop. |
Also extends all React Native View
component props.
AccordionTrigger
Prop | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | - | Required. The content of the accordion trigger. |
asChild | boolean | false | If true clones the child and passes all accessibility and functionality props to it. Available on any exported component. |
startContent | React.ReactNode | - | Start content (ReactNode) to display in accordion triggers. |
reanimatedProps | AnimatedProps<typeof Reanimated.View> | - | Props to pass to the reanimated view. |
indicator | (isExpanded: boolean) => React.ReactNode | - | Function that allows you to return a custom indicator ReactNode. |
baseClassName | string | - | Custom tailwind classes to apply to the base accordion trigger component. Takes priority over the className prop. |
indicatorIconClassName | string | - | Custom tailwind classes to apply to the indicator icon. |
contentClassName | string | - | Custom tailwind classes to apply to the accordion content. |
Also extends all React Native Text
component props.
AccordionContent
Prop | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | - | Required. The content of the accordion content. |
asChild | boolean | false | If true clones the child and passes all accessibility and functionality props to it. Available on any exported component. |
reanimatedProps | AnimatedProps<typeof Reanimated.View> | - | Props to pass to the reanimated view. |
baseClassName | string | - | Custom tailwind classes to apply to the base accordion content component. Takes priority over the className prop. |
textClassName | string | - | Custom tailwind classes to apply to the content text. |
Also extends all React Native Text
component props.
Hooks
useAccordion
The backbone hook for the accordion component that manages state and provides accessibility props.
Parameters:
Parameter | Type | Default | Description |
---|---|---|---|
type | "single" | "multiple" | "single" | The type of accordion to render. Single only allows one item to be expanded at a time, multiple allows any number of items to be expanded at a time. |
value | string | string[] | - | Controlled value for the accordion (which items are expanded). |
defaultValue | string | string[] | - | Uncontrolled default value for the accordion (which items are expanded). |
onValueChange | (value: string | string[] | null) => void | - | Callback function called when the accordion value changes. |
collapsible | boolean | true | Whether an accordion item can be collapsed manually. |
disabled | boolean | - | Whether all accordion items are disabled. |
Returns:
{
state: {
expandedValue: string | string[] | null;
setExpandedValue: (value: string | string[] | null) => void;
};
componentProps: React.ComponentProps<typeof View>;
}
Property | Type | Description |
---|---|---|
state.expandedValue | string | string[] | null | The current expanded value of the accordion. |
state.setExpandedValue | (value: string | string[] | null) => void | Function to set the expanded value of the accordion. |
componentProps | React.ComponentProps<typeof View> | Accessibility props to pass to the accordion component. |
useAccordionItem
The backbone hook for individual accordion items that manages item-specific state and provides accessibility props.
Parameters:
Parameter | Type | Description |
---|---|---|
value | string | Required. The value of the accordion item (think of this as an id). |
disabled | boolean | Whether the accordion item is disabled. |
state | AccordionReturn['state'] | The state object from the parent accordion hook. |
props | AccordionProps | Props from the top-level Accordion component. |
Returns:
{
componentProps: React.ComponentProps<typeof View>;
state: {
isExpanded: boolean;
isDisabled: boolean;
isControlled: boolean;
isFocusVisible: boolean;
}
triggerProps: React.ComponentProps<typeof Pressable>;
contentProps: React.ComponentProps<typeof View>;
}
Property | Type | Description |
---|---|---|
componentProps | React.ComponentProps<typeof View> | Accessibility props to pass to the accordion item component. |
state.isExpanded | boolean | Whether the accordion item is expanded. |
state.isDisabled | boolean | Whether the accordion item is disabled. |
state.isControlled | boolean | Whether the accordion item is controlled. |
state.isFocusVisible | boolean | Whether the accordion item is focused. |
triggerProps | React.ComponentProps<typeof Pressable> | Props to pass to the accordion trigger component. |
contentProps | React.ComponentProps<typeof View> | Props to pass to the accordion content component. |
Accessibility
The Accordion component is built with accessibility in mind and includes:
Web Accessibility
- Uses proper ARIA attributes:
aria-expanded
,aria-controls
,aria-labelledby
- Supports keyboard navigation (Tab, Enter/Space, Arrow keys, Home/End)
- Proper focus management and screen reader announcements
- Semantic HTML structure with appropriate roles
React Native Accessibility
accessibilityRole="button"
for triggersaccessibilityState
for expanded/collapsed statesaccessibilityLabel
andaccessibilityHint
support- Proper focus management for screen readers
Styling
accordion Classes
Slots:
base
- For the baseView
in the accordion component
Variants:
variant
:shadcn
(default) - Default shadcn styleshadow
- Adds background and shadow:bg-background shadow-sm
bordered
- Adds border:border border-border
splitted
- No additional styles for base
borderRadius
:sm
- Small radius:rounded-sm
md
(default) - Medium radius:rounded-md
lg
- Large radius:rounded-lg
xl
- Extra large radius:rounded-xl
Base Classes: p-2
accordionItem Classes
Slots:
base
- For the baseView
in the accordion item component
Variants:
variant
(should be the same value as thevariant
prop on the top-levelAccordion
component):shadcn
(default) - Default shadcn styleshadow
- Adds background and shadow:bg-background shadow-sm
bordered
- Adds border:border border-border
splitted
- No additional styles for base
compact
:true
- Reduces margin for splitted variant:m-1
loading
:true
- Loading state:animate-pulse opacity-50
borderRadius
(for splitted variant):sm
- Small radius:rounded-sm
md
- Medium radius:rounded-md
lg
- Large radius:rounded-lg
xl
- Extra large radius:rounded-xl
accordionTrigger Classes
Slots:
base
- For the triggerPressable
container at the root of the accordion trigger componentcontent
- For the trigger content wrapperindicatorIcon
- For the indicator icon
Variants:
focused
:true
- Focus ring:border border-ring
disabled
:true
- Disabled state:pointer-events-none opacity-50
controlled
:true
- Controlled state:pointer-events-none
compact
:true
- Reduced padding:py-2
Base Classes:
base
:flex flex-row items-center justify-between rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline
content
:flex flex-row items-center gap-4 flex-1 text-foreground
indicatorIcon
:text-muted-foreground pointer-events-none size-4 shrink-0 flex justify-center items-center
accordionContent Classes
Slots:
base
- The content containertext
- The content text
Variants:
compact
:true
- Reduced padding:py-1
Base Classes:
base
:overflow-hidden
text
:text-sm text-foreground