Capítulo 11 de 51
A vertically stacked set of collapsible panels, each header/trigger controlling its own panel, with multiple opting into more than one open at a time (default: opening one closes the others).
Root → Item (repeated) → Header → Trigger; Item → Panel.multiple prop on Root — without it, opening an item closes any other open item (single-open accordion).Item.value uniquely identifies an item for controlled usage (Root value={['a']}); if omitted, an ID is auto-generated. Use value when you need to programmatically control which item(s) start open.Panel exposes --accordion-panel-height and --accordion-panel-width CSS variables plus [data-starting-style]/[data-ending-style] — the standard way to animate a panel's height from/to 0 without hardcoding a fixed height.hiddenUntilFound (on Root, inherited by panels): lets browser page search find and expand panel content; overrides keepMounted and uses hidden="until-found".loopFocus and orientation no longer affect keyboard behavior following an APG guidance update that removed roving focus — present in the API for back-compat only.| Part | Notable props | Notable data attributes |
|---|---|---|
Root | value/defaultValue/onValueChange, multiple, disabled, hiddenUntilFound, keepMounted | data-orientation, data-disabled |
Item | value, onOpenChange, disabled | data-open, data-disabled, data-index |
Trigger | (renders <button>) | data-panel-open, data-disabled |
Header | (renders <h3>) | data-open, data-disabled, data-index |
Panel | hiddenUntilFound, keepMounted | data-open, data-orientation, data-disabled, data-index, data-starting-style, data-ending-style (CSS vars --accordion-panel-height/-width) |
multiple explicitly whenever more than one section should be able to stay open — the unannotated default is single-open, which surprises people expecting FAQ-style independent toggles.--accordion-panel-height + [data-starting-style]/[data-ending-style], never a hardcoded max-height guess — the variable reflects the real content height.loopFocus/orientation in new code — both are deprecated no-ops after the APG roving-focus removal; don't rely on them for keyboard behavior.Item is built from.data-starting-style/data-ending-style transition pattern.