Components
Accordion
A native disclosure section with keyboard support and bindable open state.
Props
Native attributes and event handlers are forwarded to the details element.
Give sections the same native name to allow only one to remain open. Bind open to control expansion programmatically. Transitions apply when isVisible changes; native expansion is immediate.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content rendered inside the component. |
class | string | '' | Classes merged with theme styles and variants. |
element | HTMLDetailsElement | null | null | Bindable reference to the native element. |
inTransition | TransitionProps | undefined | Entrance override; falls back to transition. |
isVisible | boolean | true | Bindable visibility; removing the component runs its exit transition. |
open | boolean | false | Bindable expanded state. |
outTransition | TransitionProps | undefined | Exit override; falls back to transition. |
summary | Snippet | string | 'Details' | Text or snippet rendered in the native summary. |
theme | Theme | global theme | Local theme override. |
transition | TransitionProps | [noopTransition, {}] | Transition function and optional parameters. |
variants | string[] | [] | Local variants or references to other theme styles. |
Default usage
Import Accordion from sveltewind/components. This example shows its default styling in a usable context.
What is Sveltewind?
Loading...Examples
Theme variants
Every variant available for Accordion in the built-in themes is shown below.
compact — Apply the compact variant.
What is Sveltewind?
Loading...flush — Apply the flush variant.
What is Sveltewind?
Loading...spacious — Apply the spacious variant.
What is Sveltewind?
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
What is Sveltewind?
Loading...Props and behavior
Change open, summary while retaining the default component styling.
Expanded by default
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
What is Sveltewind?
Loading...First question
Second question
Loading...