Accordion

An accordion stacks sections of content and keeps each one closed until users open it. Each trigger names its section, so users can scan the stack and read only the content they need.

UsageCopy Anchor Link

import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@biem/ui/components/ui/accordion";

export function AccordionDefault() {
	return (
		<Accordion>
			<AccordionItem>
				<AccordionTrigger>Stock transfer</AccordionTrigger>
				<AccordionContent>
					The warehouse ships 12 cases on Monday, and the store receives them on Tuesday.
				</AccordionContent>
			</AccordionItem>
			<AccordionItem>
				<AccordionTrigger>Delivery window</AccordionTrigger>
				<AccordionContent>
					The store accepts deliveries from 6:00 to 8:00, before it opens.
				</AccordionContent>
			</AccordionItem>
			<AccordionItem>
				<AccordionTrigger>Returns</AccordionTrigger>
				<AccordionContent>
					The store sends damaged items back with the next delivery.
				</AccordionContent>
			</AccordionItem>
		</Accordion>
	);
}

ExamplesCopy Anchor Link

Open by DefaultCopy Anchor Link

One section often holds what most users come for, such as the status of an open order. Listed in defaultValue, that section is already open when the accordion appears, and users remain free to close it or to open another.

ControlledCopy Anchor Link

Other parts of an interface sometimes decide which section is open, for example a warning that points to the section explaining its cause. Through value and onValueChange, the application keeps track of the open sections and can open the right one, so users arrive directly at the explanation they need.

MultipleCopy Anchor Link

When users compare two sections, such as the terms of two suppliers, they need both open at once. By default, opening a section closes the one that was open. Once multiple is set, several sections stay open together, so users keep both in view.

With FrameCopy Anchor Link

Next to tables and charts, an accordion can blend into the content around it. Wrapped in AccordionFrame, its sections form one self-contained unit, so users see at once which content belongs to the group.

DisabledCopy Anchor Link

While the figures inside an accordion are being recalculated, its sections should stay as they are. Through disabled, the accordion holds every section in its current state, so users can neither open nor close one before the figures are complete.

Disabled ItemCopy Anchor Link

Sometimes only one section is unavailable, for instance because users lack the permission for its content. That item alone then carries disabled, so users cannot open or close it, yet they still see that it exists while every other section works as before.

API ReferenceCopy Anchor Link

AccordionCopy Anchor Link

AccordionItemCopy Anchor Link

AccordionTriggerCopy Anchor Link

AccordionContentCopy Anchor Link