Accordions
Divide content into collapsible sections.
import { AccordionGroup, AccordionItem } from '@brainandbones/skeleton';Examples
Does Skeleton come with an Accordion component?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eaque nam deleniti rem incidunt.
What else do I need to know to build awesome web apps?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eaque nam deleniti rem incidunt.
What is the weather like today?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eaque nam deleniti rem incidunt.
Customized
Icon and Heading
Icon and Heading
The content for the first element.
Avatar and Heading
Avatar and Heading
The content for the second element.
Numeral and Heading
Numeral and Heading
The content for the third element.
Usage
<AccordionGroup>
<AccordionItem open>
<svelte:fragment slot="summary">Summary 1</svelte:fragment>
<svelte:fragment slot="content"><p>Content 1</p></svelte:fragment>
</AccordionItem>
<AccordionItem>
<svelte:fragment slot="summary">Summary 2</svelte:fragment>
<svelte:fragment slot="content"><p>Content 2</p></svelte:fragment>
</AccordionItem>
<AccordionItem>
<svelte:fragment slot="summary">Summary 3</svelte:fragment>
<svelte:fragment slot="content"><p>Content 3</p></svelte:fragment>
</AccordionItem>
</AccordionGroup>Properties
Accordion Group
| Prop | Type | Default | Description |
|---|---|---|---|
| collapse | boolean | true | Enable auto-collapse mode. |
| spacing | string | spacing-y-2 | Provide classes to set spacing between item rows. |
Accordion Item
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Defines the default open state on page load. |
| hover | string | hover:bg-primary-500/10 | Provide classes to set the hover background color. |
| spacing | string | space-y-0 | Provide classes to set spacing between title and description elements. |
| padding | string | px-4 py-2 | Provide classes to set padding for summary and content regions. |
| rounded | string | rounded | Provide classes to set summary border radius. |
Slots
Accordion Item
| Name | Required | Style Prop | Description |
|---|---|---|---|
| lead | - | slotSummary > .summary-lead | Allows for an optional leading element, such as an icon. |
| summary | ✓ | slotSummary | Provide the summary details of each item. |
| content | ✓ | slotContent | Provide the content details of each item. |
Accessibility
Accordion Item
ARIA Guidelines| Prop | Description |
|---|---|
| summaryId | Provide semantic ID for ARIA summary element. |
| contentId | Provide semantic ID for ARIA content element. |
Keyboard Interactions
| Keys | Description |
|---|---|
| Tab | Moves focus to the next focusable element. |
| Shift + Tab | Moves focus to the previous focusable element. |
| Space or Enter | When focus is on the accordion header toggles the collapsable region open/closed. |