AccordionItem

Define one collapsible section within an Accordion, combining a heading and content under the parent expansion state.

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 AccordionItem as one expandable item inside Accordion. The parent coordinates expansion; do not use the item as a standalone page container.

Provide a unique value inside the parent. Accordion manages the expanded state.
Declare the title and body with direct Frame as="title" and Frame as="content" children. A direct as="trailing" child inside the title can replace the expansion icon.

Import

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

Usage

Small size

Medium size

Large size

Filled variant

Divided variant

API Reference

Property	Type	Default	Example	Description
`value`	`string`	`— (required)`	`value="Example"`	Stable identity of this item, unique within its Accordion. Matches the parent value or defaultValue; it is not an independently bound expanded boolean.
`disabled`	`boolean`	`false`	`disabled`	Disable the item title and collapse interaction. A disabled parent Accordion also disables this item and cannot be overridden by setting disabled=false here.
`children`	`Snippet`	`—`	`<AccordionItem>Content</AccordionItem>`	Declare direct Frame as="title" and Frame as="content" children. A direct as="trailing" child in the title can replace the default expansion icon. Must be used inside Accordion.