accordion

29 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Accordion component parts and composition

An Accordion component consists of five parts arranged hierarchically: Accordion.Root contains the entire component, Accordion.Item contains a collapsible section, Accordion.Header wraps a trigger and should be updated to the appropriate heading level using asChild, Accordion.Trigger toggles the collapsed state and must be nested inside Accordion.Header, and Accordion.Content contains the collapsible content for an item.

Accordion.Root type prop required and values

The type prop on Accordion.Root is required and accepts two enum values: 'single' allows only one item to be expanded at a time, and 'multiple' allows multiple items to be expanded simultaneously.

Accordion.Root controlled multiple items props

When type is 'multiple', Accordion.Root accepts: value (string[], optional, default []) for the controlled array of expanded item values, which must be used with onValueChange; defaultValue (string[], optional, default []) for the uncontrolled initial array of expanded items; and onValueChange (function with signature (value: string[]) => void, optional) called when the expanded state changes.

Accordion.Root collapsible prop

The collapsible prop on Accordion.Root is a boolean (optional, default false). When true and type is 'single', it allows users to close all items by clicking the trigger for an open item.

Accordion.Root orientation and direction props

Accordion.Root accepts orientation (enum 'horizontal' or 'vertical', optional, default 'vertical') to set the accordion layout, and dir (enum 'ltr' or 'rtl', optional, default 'ltr') to set the reading direction. If dir is omitted, it assumes left-to-right reading mode.

Accordion.Root disabled prop

The disabled prop on Accordion.Root is a boolean (optional, default false). When true, it prevents the user from interacting with the accordion and all its items.

Accordion.Item value prop required

The value prop on Accordion.Item is required and must be a unique string that identifies the item for expanded/collapsed state tracking.

Accordion.Item disabled prop

The disabled prop on Accordion.Item is a boolean (optional, default false). When true, it prevents the user from interacting with that individual item.

Accordion.Header wraps Accordion.Trigger

Accordion.Header wraps an Accordion.Trigger and should use the asChild prop to update it to the appropriate heading level for your page.

Accordion.Trigger nesting requirement

Accordion.Trigger must be nested inside an Accordion.Header.

Accordion.Trigger asChild prop

The asChild prop on Accordion.Trigger is a boolean (optional, default false). When true, it changes the default rendered element to the one passed as a child, merging their props and behavior.

Accordion.Content forceMount prop

The forceMount prop on Accordion.Content is a boolean (optional). When true, it forces the content to mount even when closed, which is useful when more control is needed or when controlling animation with React animation libraries.

Accordion.Content asChild prop

The asChild prop on Accordion.Content is a boolean (optional, default false). When true, it changes the default rendered element to the one passed as a child, merging their props and behavior.

Accordion data attributes for styling

All Accordion parts support data attributes for styling: [data-state] with values 'open' or 'closed' on Item, Header, Trigger, and Content; [data-disabled] present when disabled on Item, Header, Trigger, and Content; [data-orientation] with values 'vertical' or 'horizontal' on Root, Item, Header, Trigger, and Content.

Accordion CSS variables for content animation

Accordion.Content supports two CSS variables: --radix-accordion-content-width for the width of the content when it opens/closes, and --radix-accordion-content-height for the height of the content when it opens/closes. These are useful for animating the size changes.

Accordion features summary

Accordion supports full keyboard navigation, horizontal and vertical orientation, right-to-left direction, the ability to expand one or multiple items, and both controlled and uncontrolled APIs.

Accordion example expanded by default

To expand an item by default in single-item mode, use the defaultValue prop: <Accordion.Root type="single" defaultValue="item-2"><Accordion.Item value="item-1">…</Accordion.Item><Accordion.Item value="item-2">…</Accordion.Item></Accordion.Root>

Accordion example allow collapsing all items

To allow all items to close in single-item mode, use the collapsible prop: <Accordion.Root type="single" collapsible><Accordion.Item value="item-1">…</Accordion.Item><Accordion.Item value="item-2">…</Accordion.Item></Accordion.Root>

Accordion example multiple items open

To enable opening multiple items at once, set type to 'multiple': <Accordion.Root type="multiple"><Accordion.Item value="item-1">…</Accordion.Item><Accordion.Item value="item-2">…</Accordion.Item></Accordion.Root>

Accordion example rotated icon when open

To add a rotated chevron icon when an accordion item opens, add a decorative icon to the Trigger with a className, then rotate it based on data-state. In JSX: <Accordion.Trigger className="AccordionTrigger"><span>Trigger text</span><ChevronDownIcon className="AccordionChevron" aria-hidden /></Accordion.Trigger>. In CSS: .AccordionChevron { transition: transform 300ms; } .AccordionTrigger[data-state="open"] > .AccordionChevron { transform: rotate(180deg); }

Accordion example horizontal orientation

To create a horizontal accordion, use the orientation prop: <Accordion.Root orientation="horizontal"><Accordion.Item value="item-1">…</Accordion.Item><Accordion.Item value="item-2">…</Accordion.Item></Accordion.Root>

Accordion example animating content size

To animate the size of accordion content when it opens/closes, use the --radix-accordion-content-height CSS variable with keyframe animations. Example CSS: .AccordionContent { overflow: hidden; } .AccordionContent[data-state="open"] { animation: slideDown 300ms ease-out; } .AccordionContent[data-state="closed"] { animation: slideUp 300ms ease-out; } @keyframes slideDown { from { height: 0; } to { height: var(--radix-accordion-content-height); } } @keyframes slideUp { from { height: var(--radix-accordion-content-height); } to { height: 0; } }

Accordion horizontal orientation RTL support

Add horizontal orientation support with new orientation prop to Accordion, as well as RTL support with dir prop.

Accordion initial animation Firefox Safari

Fix initial animation playback in Firefox and Safari for Accordion.

Accordion.Trigger prevents form submission

Accordion.Trigger no longer submits a form when pressed.

Accordion renamed from Button to Trigger and Panel to Content

Accordion.Button was renamed to Accordion.Trigger and Accordion.Panel was renamed to Accordion.Content. The custom property was renamed to --radix-accordion-content-height.

Accordion single type with collapsible prop

Accordion with type='single' now has a collapsible prop that defaults to false. This changes the default behavior; users cannot close all items by default.

Accordion version 0.0.7 adds height CSS custom property for animation

Accordion version 0.0.7 added a height CSS custom property to the panel to support easier animation.

Accordion version 0.0.6 breaking change: type prop required for multiple values support

In Accordion version 0.0.6, support for multiple open values was added as a breaking change, making the new type prop required.

Give your agent this brain