Pricing

AccordionItem handbook

v1.3.3 · @snowui-design-system/components

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

Defines one collapsible item inside Accordion, pairing its title and content while the parent manages expansion state.

When to use it

Use it as one expandable item in an Accordion. The parent coordinates expansion; AccordionItem is not a standalone page container.

  • Give each item a unique value within its parent Accordion. Accordion manages the expanded state.

  • Use direct Frame as="title" and Frame as="content" children for the title and body. A direct as="trailing" child inside the title can replace the expand icon.

Quick start

This example shows the recommended basic composition. See the sections below for more cases and composition limits.

<script lang="ts">	import { Accordion, AccordionItem, Frame, Icon, Link, Text } from '@snowui-design-system/components';	import { BookOpen, Code, Package, Palette, ShieldCheck } from '@snowui-design-system/resource-svelte';</script> <Accordion defaultValue="installation" style="width: min(100%, 36rem);">	<AccordionItem value="installation">		<Frame as="title" singleLine><Icon as="leading"><Package /></Icon><Text lines={1}>Install the component package</Text></Frame>		<Frame as="content" column><Text>Add Components and Resource packages with your package manager.</Text><Link variant="arrow" href="/components/quick-start">Open Quick Start</Link></Frame>	</AccordionItem>	<AccordionItem value="catalog"><Frame as="title" singleLine><Icon as="leading"><BookOpen /></Icon><Text lines={1}>Explore the component catalog</Text></Frame><Frame as="content" row>Review live previews, public APIs, and copy-ready examples for every component.</Frame></AccordionItem>	<AccordionItem value="themes"><Frame as="title" singleLine><Icon as="leading"><Palette /></Icon><Text lines={1}>Apply a SnowUI theme</Text></Frame><Frame as="content" row>Use the shared semantic color contract across light and dark interfaces.</Frame></AccordionItem>	<AccordionItem value="compose"><Frame as="title" singleLine><Icon as="leading"><Code /></Icon><Text lines={1}>Compose title and content slots</Text></Frame><Frame as="content" row>Build each item with title and content Frames, including optional leading or trailing content.</Frame></AccordionItem>	<AccordionItem value="quality"><Frame as="title" singleLine><Icon as="leading"><ShieldCheck /></Icon><Text lines={1}>Verify interaction quality</Text></Frame><Frame as="content" row>Confirm keyboard control, focus state, motion, and responsive layout in the browser.</Frame></AccordionItem></Accordion>

API

Keyword Type Default Description
value string — (required) A stable identifier for this item. It must be unique within the same Accordion and match the parent value / defaultValue; it is not an independently bindable expanded boolean.
disabled boolean false Disables interaction on this item’s title and content. A disabled parent Accordion also disables the item; setting this Prop to false cannot override the parent.
children Snippet — Declare direct Frame as="title" and Frame as="content" children. A direct as="trailing" child in the title can replace the default expand icon. Use AccordionItem only inside Accordion.

See the base component documentation for inherited capabilities not redeclared here. This table lists only named public Props declared by this component.

Usage boundaries and details

API reference

Keyword Type Default Description
size never - Not supported. Only the parent Accordion controls item size.
...rest FrameProps - Passed through to the internal root Frame.

AccordionItem does not set its own size. Its font size, line height, padding, radius, and built-in icon size inherit the variables produced by the parent Accordion size. value only matches the parent value / defaultValue to determine expansion.

Layout model

Primary layout model: one child item within a parent-managed composite layout.

  • The outer root is Frame tag="div" column; it owns the item background, radius, dividers, and expanded state.

  • A direct Frame as="title" row child is the title trigger and always uses three slots. Direct as="leading", ordinary content, and direct as="trailing" children occupy those slots.

  • A direct Frame as="content" row child is the content region and also uses three slots. During collapse it keeps its width while its height contracts downward and its opacity fades out.

  • The title inherits color from the parent Accordion or outer container. Content uses the parent’s --snowui-accordion-content-color by default, a theme-adaptive Black/40% secondary text color.

  • By default, ComponentIcon renders a plus icon that rotates 45° into an × when expanded. The parent Accordion’s indicatorVariant="minus" keeps the plus/minus replacement and half-turn motion. An explicit trailing child takes precedence.

  • There is no hover background. By default, only the indicator icon changes color on title hover.

  • Only the title toggles expansion; clicking the content does not collapse it. By default, the content uses the same font size and line height as the title at every size.

Style variable chain

Variable Default Use
--snowui-accordion-item-content-block-size-override --snowui-accordion-content-max-block-size-override / measured height Per-item override for the maximum expanded content height
--snowui-accordion-content-color-override var(--black-40) Locally overrides content text color without affecting the title

Usage examples

<Accordion defaultValue="profile">    <AccordionItem value="profile">        <Frame as="title" singleLine>            <Text lines={1}>Profile</Text>            <Icon as="trailing"><Resource.Plus /></Icon>        </Frame>        <Frame as="content" row>Profile content</Frame>    </AccordionItem></Accordion>

This section is protected. An AI must request user review before modifying it.

AccordionItem style overrides

Read the full LICENSE first; reuse that review for the same task, version, and scope.

First use public component Props to match the desired appearance, preserving the existing look where possible. If changes are necessary, follow the style selection and override order: use your own class (including Tailwind already in the project) or an instance style. The names below are public overrides actually consumed by source; check their scope and do not modify private DOM. Choose the correct SnowUI token family. External apps need not install SnowUI website utilities.

Variable Purpose and default reference
--snowui-accordion-background-override Item background (divided: transparent; filled: var(--black-4) by default)
--snowui-accordion-content-color-override Content text color (var(--black-40) by default; adapts to Light / Dark themes)
--snowui-accordion-content-font-size-override Content font size (defaults: sm=var(--text-12), md=var(--text-14), lg=var(--text-16))
--snowui-accordion-content-line-height-override Content line height (defaults: sm=var(--leading-12), md=var(--leading-14), lg=var(--leading-16))
--snowui-accordion-content-max-block-size-override Maximum expanded content height (default: 100vh)
--snowui-accordion-content-padding-x-override Content horizontal padding (default: 8; filled: sm 12 / md 16 / lg 20)
--snowui-accordion-content-padding-y-override Content vertical padding (defaults: sm 8 / md 12 / lg 16)
--snowui-accordion-font-size-override Title font size (defaults: sm=var(--text-14), md=var(--text-16), lg=var(--text-18))
--snowui-accordion-icon-size-override Default expand/collapse icon size (sm 16 / md 20 / lg 24)
--snowui-accordion-item-content-block-size-override Maximum expanded height for one content region (measured height by default; 100vh fallback)
--snowui-accordion-line-height-override Title line height (defaults: sm=var(--leading-14), md=var(--leading-16), lg=var(--leading-18))
--snowui-accordion-padding-x-override Trigger horizontal padding (default: 8; filled: sm 12 / md 16 / lg 20)
--snowui-accordion-padding-y-override Trigger vertical padding (defaults: sm 8 / md 12 / lg 16)
--snowui-accordion-radius-override Item border radius (default: 0; filled: sm 12 / md 16 / lg 24)
--snowui-accordion-shadow-override Inset divider / border shadow for the item
--snowui-accordion-trigger-gap-override Spacing between the title and indicator (default: 8)

Design guide · Tokens · Composition boundaries

AccordionItem types and states

Required attribute: value.

Bindable Props: this component declares no named two-way binding; handle state updates through public callbacks or its host.

Inherited declaration: Omit<FrameProps, "children" | "value" | "size">. See the base component’s public documentation for inherited capabilities; omitted fields are unavailable here.

Shared Frame API · Back to API

The following type declarations are actually referenced by public Props and come from source. A Svelte Snippet denotes a content fragment; ComponentProps denotes the Props of the corresponding component.