Skip to Content

Built by moveinready.casa  and the community

DocumentationComponentsAccordion
Shadcn Docs

Radix Docs

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&apos;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

PropTypeDefaultDescription
childrenReact.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.
valuestring | string[]-Controlled value for the accordion (which items are expanded).
defaultValuestring | 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.
collapsiblebooleantrueWhether an accordion item can be collapsed manually. Use on the top level Accordion component.
disabledbooleanfalseWhether all accordion items are disabled. Available on the top level Accordion component and on the AccordionItem component.
loadingbooleanfalseWhether all accordion items are loading. Available on the top level Accordion component and on the AccordionItem component.
compactboolean-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.
asChildbooleanfalseIf true clones the child and passes all accessibility and functionality props to it. Available on any exported component.
baseClassNamestring-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

PropTypeDefaultDescription
childrenReact.ReactNode-Required. The content of the accordion item.
valuestring-Required. The value of the accordion item (think of this as an id).
disabledboolean-Whether the accordion item is disabled. This can override the disabled state of the top-level Accordion component.
loadingboolean-Whether the accordion item is loading. This can override the loading state of the top-level Accordion component.
asChildbooleanfalseIf true clones the child and passes all accessibility and functionality props to it. Available on any exported component.
startContentReact.ReactNode-Start content (ReactNode) to display in accordion triggers.
baseClassNamestring-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

PropTypeDefaultDescription
childrenReact.ReactNode-Required. The content of the accordion trigger.
asChildbooleanfalseIf true clones the child and passes all accessibility and functionality props to it. Available on any exported component.
startContentReact.ReactNode-Start content (ReactNode) to display in accordion triggers.
reanimatedPropsAnimatedProps<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.
baseClassNamestring-Custom tailwind classes to apply to the base accordion trigger component. Takes priority over the className prop.
indicatorIconClassNamestring-Custom tailwind classes to apply to the indicator icon.
contentClassNamestring-Custom tailwind classes to apply to the accordion content.

Also extends all React Native Text component props.

AccordionContent

PropTypeDefaultDescription
childrenReact.ReactNode-Required. The content of the accordion content.
asChildbooleanfalseIf true clones the child and passes all accessibility and functionality props to it. Available on any exported component.
reanimatedPropsAnimatedProps<typeof Reanimated.View>-Props to pass to the reanimated view.
baseClassNamestring-Custom tailwind classes to apply to the base accordion content component. Takes priority over the className prop.
textClassNamestring-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:

ParameterTypeDefaultDescription
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.
valuestring | string[]-Controlled value for the accordion (which items are expanded).
defaultValuestring | 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.
collapsiblebooleantrueWhether an accordion item can be collapsed manually.
disabledboolean-Whether all accordion items are disabled.

Returns:

{ state: { expandedValue: string | string[] | null; setExpandedValue: (value: string | string[] | null) => void; }; componentProps: React.ComponentProps<typeof View>; }
PropertyTypeDescription
state.expandedValuestring | string[] | nullThe current expanded value of the accordion.
state.setExpandedValue(value: string | string[] | null) => voidFunction to set the expanded value of the accordion.
componentPropsReact.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:

ParameterTypeDescription
valuestringRequired. The value of the accordion item (think of this as an id).
disabledbooleanWhether the accordion item is disabled.
stateAccordionReturn['state']The state object from the parent accordion hook.
propsAccordionPropsProps 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>; }
PropertyTypeDescription
componentPropsReact.ComponentProps<typeof View>Accessibility props to pass to the accordion item component.
state.isExpandedbooleanWhether the accordion item is expanded.
state.isDisabledbooleanWhether the accordion item is disabled.
state.isControlledbooleanWhether the accordion item is controlled.
state.isFocusVisiblebooleanWhether the accordion item is focused.
triggerPropsReact.ComponentProps<typeof Pressable>Props to pass to the accordion trigger component.
contentPropsReact.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 triggers
  • accessibilityState for expanded/collapsed states
  • accessibilityLabel and accessibilityHint support
  • Proper focus management for screen readers

Styling

accordion Classes

Slots:

  • base - For the base View in the accordion component

Variants:

  • variant:
    • shadcn (default) - Default shadcn style
    • shadow - 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 base View in the accordion item component

Variants:

  • variant (should be the same value as the variant prop on the top-level Accordion component):
    • shadcn (default) - Default shadcn style
    • shadow - 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 trigger Pressable container at the root of the accordion trigger component
  • content - For the trigger content wrapper
  • indicatorIcon - 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 container
  • text - The content text

Variants:

  • compact:
    • true - Reduced padding: py-1

Base Classes:

  • base: overflow-hidden
  • text: text-sm text-foreground

shadcn-native

Built by moveinready.casa and the community