Accordion

Figma Source code

Organize related content into expandable sections for FAQs, settings, and step-by-step explanations, with single or multiple sections open.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Accordion for FAQs, grouped settings, and collapsible explanations. Use Tab to switch content panels in the same region. Place AccordionItem inside Accordion.

type="single" uses a string value and multiple uses an array. bind:value synchronizes expanded items; defaultValue supplies only the initial state.
items mode uses stringified indices as values. Generated titles truncate on one line while retaining their complete accessible name; parts.Text configures that title text. Explicit children replace items and configure themselves rather than reading generated-child parts.
Inside Accordion, Icon as="leading" inherits its icon size when size is omitted: 16/20/24 for sm/md/lg. Other Icons do not use this special inheritance; an explicit size takes priority.

Import

import { Accordion } from '@snowui-design-system/components';

Usage

Small size

Medium size

Large size

Filled variant

Divided variant

API Reference

Property	Type	Default	Example	Description
`type`	`AccordionType`	`"single"`	`type={value}`	single expands one item at a time; multiple allows several expanded items. Determines the value shape for value, defaultValue, and onValueChange.
`value`	`AccordionValue`	`—`	`value={value}`	Current expanded value; supports bind:value and takes priority over internal state. single uses a string and multiple an array. An empty string in single means every item is closed.
`defaultValue`	`AccordionValue`	`—`	`defaultValue={value}`	Initial uncontrolled expanded value, read only when initializing internal state. value takes priority. items mode uses stringified indices; explicit AccordionItem children use their own value.
`collapsible`	`boolean`	`true`	`collapsible`	In single mode, allow clicking the expanded item to close it.
`variant`	`AccordionVariant`	`"filled"`	`variant={value}`	filled uses separate panels with backgrounds; divided uses separators between items. Both share expansion state and interaction.
`size`	`AccordionSize`	`—`	`size={value}`	Density. Explicit size takes priority, followed by parent size context, then md. Controls titles, bodies, spacing, and child sizes together.
`disabled`	`boolean`	`false`	`disabled`	Disable the entire Accordion.
`continuousHover`	`boolean`	`false`	`continuousHover`	Deprecated compatibility Prop. No value enables the former hover background.
`indicatorVariant`	`"cross" \| "minus"`	`"cross"`	`indicatorVariant="cross"`	cross rotates the same plus sign 45° into an X; minus switches plus and minus with a half-turn. A custom trailing child replaces the default indicator.
`role`	`string`	`"presentation"`	`role="Example"`	ARIA role for the root container. By default it is only a presentation group; AccordionItem still owns trigger and content-region semantics.
`items`	`AccordionEntry[]`	`[]`	`items={items}`	Data for the generated mode. Internal values are stringified array indices.
`children`	`Snippet`	`—`	`<Accordion>Content</Accordion>`	Explicitly composed content; replaces generated items when present.
`parts`	`ComponentPartsOf<{ AccordionItem: typeof AccordionItem; Frame: typeof Frame; Text: typeof Text; }>`	`—`	`parts={partsOptions}`	Configure generated AccordionItem, title/body Frames and title Text in items mode. Explicit children do not read this generated-child configuration.
`onValueChange`	`(value: AccordionValue) => void`	`—`	`onValueChange={(value) => { /* handle value */ }}`	Called after the user toggles expansion. single returns the current item string or an empty string when all are closed; multiple returns an array of expanded items. Can be paired with bind:value for page state.