Skip to Content

Built by moveinready.casa  and the community

Shadcn Docs

Radix Docs

Collapsible

An interactive component which expands/collapses a panel.

Note: in most cases you will want to use the Accordion component instead. If your use case requires a light weight, unstyled accordion component, this is the one to use.

Usage

import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; <Collapsible> <CollapsibleTrigger> <Text>Can I use this in my project?</Text> </CollapsibleTrigger> <CollapsibleContent> <Text> Yes. Free to use for personal and commercial projects. No attribution required. </Text> </CollapsibleContent> </Collapsible>;

Components

Collapsible

PropTypeDefaultDescription
childrenReact.ReactNode-Required. The content of the collapsible.
openboolean-Controlled open state. When provided, the component becomes controlled.
defaultOpenbooleanfalseUncontrolled default open state.
onOpenChange(isOpen: boolean) => void-Called whenever the open state changes.
disabledbooleanfalsePrevents user interaction.
asChildbooleanfalseIf true, clones the child and passes all accessibility and functionality props to it.
baseClassNamestring-Custom tailwind classes to apply to the base collapsible component. Takes priority over the className prop.

Also extends all React Native View component props.

CollapsibleTrigger

PropTypeDefaultDescription
childrenReact.ReactNode-Required. The content of the collapsible trigger.
asChildbooleanfalseIf true, clones the child and passes all accessibility and functionality props to it.

Also extends all React Native Pressable component props.

CollapsibleContent

PropTypeDefaultDescription
childrenReact.ReactNode-Required. The content of the collapsible content.
asChildbooleanfalseIf true, clones the child and passes all accessibility and functionality props to it.

Also extends all React Native View component props.

Hooks

useCollapsible

The backbone hook for the collapsible component that manages state and provides accessibility props.

Parameters:

ParameterTypeDefaultDescription
openboolean-Controlled open state. When provided, the component becomes controlled.
defaultOpenbooleanfalseUncontrolled default open state.
onOpenChange(isOpen: boolean) => void-Called whenever the open state changes.
disabledbooleanfalsePrevents user interaction.

Returns:

{ state: { isOpen: boolean; setOpen: (open: boolean) => void; }; componentProps: React.ComponentProps<typeof View>; }
PropertyTypeDescription
state.isOpenbooleanWhether the collapsible is currently open.
state.setOpen(open: boolean) => voidFunction to set the open state of the collapsible.
componentPropsReact.ComponentProps<typeof View>Accessibility props to pass to the collapsible component.

useCollapsibleTrigger

The backbone hook for the collapsible trigger that provides accessibility props.

Returns:

{ triggerProps: React.ComponentProps<typeof Pressable>; }
PropertyTypeDescription
triggerPropsReact.ComponentProps<typeof Pressable>Accessibility props to pass to the collapsible trigger component.

Accessibility

The Collapsible component is built with accessibility in mind and includes:

Web Accessibility

  • Uses useButton hook for proper button semantics
  • Uses useFocusRing for focus management
  • Supports ARIA attributes: role="button", aria-expanded
  • Keyboard navigation support (Enter and Space keys)
  • Proper focus management

React Native Accessibility

  • accessibilityRole="button" for proper screen reader announcement
  • accessibilityState={{expanded: boolean}} to communicate collapsible state
  • accessibilityHint provides context about the action
  • Proper touch target size (minimum 44x44 points)
  • Screen reader optimized content

shadcn-native

Built by moveinready.casa and the community