Accordion

Lists questions that each open their answer below them, one at a time or several at once.

Configurations

Supported configurations for this component.

SingleMultipleOpen by default

States

Interaction states covered by the API and the style contract.

HoverFocus visible

Configurations

3 examples
Single

Multiple

  1. About five minutes, with one photo ID.

  3. Yes, and you keep your wallet and its history.
Open by default

  1. About five minutes, with one photo ID.

States

2 examples
Hover

Rest

Hover
Focus visible

Rest

Focus visible

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Accordion

PropTypeDefaultDescription
type'single'|'multiple''single'Single keeps one item open at a time; multiple opens items independently.
collapsiblebooleantrueSingle only: the open item closes when its trigger is pressed again, leaving none open. False keeps one open at all times.
valuestring|string[]-Controlled open value: a string for single ('' for none), an array for multiple. Pair with onValueChange.
defaultValuestring|string[]-Initial open value when uncontrolled, same shape as value.
onValueChange(value: string | string[]) => void-Called with the next open value: a string for single, an array for multiple.
as'div'|'ol'|'ul''div'The list element. With 'ol' or 'ul' each item renders as an li, so a numbered list keeps its list semantics.
childrenReact.ReactNode-AccordionItems.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

AccordionItem

PropTypeDefaultDescription
valuereqstring-Identifies the item in the group's open value.
disabledbooleanfalseThe item cannot be toggled: Collapsible's disabled state (dimmed, not-allowed cursor). It keeps whatever open state the group gives it.
childrenReact.ReactNode-An AccordionTrigger followed by an AccordionContent.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

AccordionTrigger

PropTypeDefaultDescription
childrenreqReact.ReactNode-The question, set at textLg in text.primary.
leadingReact.ReactNode-A short index ("01") in the glyph slot before the question: label role, tabular, text.faint at rest, text.muted while open, hovered or focused. Without it the question starts at the row inset.
onClick(event: React.MouseEvent<HTMLButtonElement>) => void-Runs before the toggle; call preventDefault to keep the item as it is.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

AccordionContent

PropTypeDefaultDescription
childrenReact.ReactNode-The answer, set at textMd in text.secondary. Children stack in a column 12px apart.
classNamestring-Merged onto the answer's box.
styleReact.CSSProperties-Merged onto the answer's box.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Artifact

Frames something an agent produced, such as a table or a chart, under a title bar with its actions.

3 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states