base-ui
base-ui copied to clipboard
[accordion] New Accordion components and hooks
Closes #25 Closes #627 Closes #702
Builds on top of:
- https://github.com/mui/base-ui/pull/481
- https://github.com/mui/base-ui/pull/487
Preview
👉 https://deploy-preview-577--base-ui.netlify.app/components/react-accordion
Summary
-
orientation: 'vertical' | 'horizontal'
: sets a data attr and navigates focus between triggers with ArrowRight/Left instead of ArrowDown/Up -
Collapsible.Content
now exposes the--collapsible-content-width
var to support horizontal orientation -
direction: 'ltr' | 'rtl'
: sets thedir
attr like other components and reverses ArrowRight & ArrowLeft whenorientation === 'horizontal'
-
openMultiple: boolean
: defaulttrue
, controls whether multiple sections can be open at the same time, not expected to change during the lifetime of the component -
disabled
can be set on theRoot
,Section
, orTrigger
-
hidden="until-found"
can be set on theRoot
or aPanel
-
useCollapsibleTrigger
(andCollapsible/AccordionTrigger
) now usesuseButton
Extra demos
- Animations +
hidden="until-found"
https://deploy-preview-577--base-ui.netlify.app/experiments/accordion-animations - Horizontal LTR + RTL https://deploy-preview-577--base-ui.netlify.app/experiments/accordion-horizontal