React hook that helps creating accesssible Collapse components.

useCollapse works similar to useDisclosure, but adds a few extra options specifically for the Collapse component.

getCollapseProps returns an in prop instead of hidden and setting isCollapsible to false will omit the aria tags and click handler for the toggle element.


import { useCollapse } from '@saas-ui/react'


defaultIsOpenbooleanSet the collapse to open by default.
onOpen() => voidCallback function, called when the collapse opens.
onClose() => voidCallback function, called when the collapse closes.
isCollapsiblebooleanSet this to false to disable the collapse.

Return value

The useCollapse hook returns the isOpen state and two prop getter functions.

isOpenbooleanBoolean that indicates if the collapse is open or closed.
getToggleProps(props) => ObjectReturns properties for the toggle element.
getCollapseProps(props) => ObjectReturns properties for the collapse element.
onOpen() => voidOpen the collapse.
onClose() => voidClose the collapse.
onToggle() => voidToggle the collapse.


Adds aria-expanded and aria-controls tags to the toggle component and a unique id collapse-[n] to the collapse.


Basic usage

function NavGroup({
defaultIsOpen = true,
title = 'Nav group',
children = (
}) {
const { isOpen, getToggleProps, getCollapseProps } = useCollapse({
const headingStyles = {
cursor: 'pointer',
borderRadius: 'md',
userSelect: 'none',
p: 2,
_hover: {
bg: 'gray.600',
return (
<Box p="8">
<Heading sx={headingStyles} size="md" {...getToggleProps()}>
<Collapse {...getCollapseProps()}>
<Box p={2}>{children}</Box>


Was this helpful?