Components
Accordion
Panels that open and close under a summary line.
Accordion hides content under a summary line until it is opened. AccordionSummary is the line, AccordionDetails holds the content and AccordionActions lines up buttons at the end.
import Accordion from '@hone-ui/react/Accordion';
import AccordionSummary from '@hone-ui/react/AccordionSummary';
import AccordionDetails from '@hone-ui/react/AccordionDetails';
import AccordionActions from '@hone-ui/react/AccordionActions';Examples
<div style={{ width: 420 }}>
<Accordion>
<AccordionSummary>Shipping</AccordionSummary>
<AccordionDetails>Orders ship within two business days.</AccordionDetails>
</Accordion>
<Accordion defaultExpanded>
<AccordionSummary>Returns</AccordionSummary>
<AccordionDetails>Return any item within 30 days.</AccordionDetails>
<AccordionActions>
<Button>Agree</Button>
</AccordionActions>
</Accordion>
</div>Props
| Component | Props |
|---|---|
Accordion | expanded, defaultExpanded (false), onChange(event, expanded), disabled, disableGutters, square, elevation (1), slotProps.region |
AccordionSummary | expandIcon, headingComponent ('h3'), slotProps.heading, button props |
AccordionDetails | div props |
AccordionActions | disableSpacing (false) |
Every part takes sx, className, style and ref.
Notes
- The content's height animates with CSS.
TransitionComponent,TransitionPropsandslots.transitionare not supported. - Closed content stays in the DOM with
hidden="until-found", so the browser's find-in-page can open it. - AccordionDetails and AccordionActions are Server Components.
Accessibility
The summary is a button inside a heading, with aria-expanded and aria-controls. The
content is a region labelled by the summary.