Collapsible

Expandable container for showing and hiding content. Perfect for FAQs, settings, and progressive disclosure.

Installation

Import

import { Collapsible } from '@svelte-atoms/core/collapsible';

Preset Configuration

Customize the collapsible appearance using presets

You can customize the default styles for Collapsible components by defining presets in your configuration:

Examples

Explore different collapsible variations

Basic Collapsible

Simple collapsible with toggle button

Click to toggle

This content can be shown or hidden. Collapsibles are great for organizing information and reducing visual clutter.

Code

<script lang="ts">
  let open = $state(false);
</script>

<Collapsible.Root bind:open>
  <Collapsible.Trigger>
    <button>Toggle Content</button>
  </Collapsible.Trigger>
  <Collapsible.Content>
    <p>This content can be shown or hidden.</p>
  </Collapsible.Content>
</Collapsible.Root>

Controlled State

Control the open state externally

Controlled Collapsible Open

This collapsible is controlled by external state.

API Reference

Collapsible.Root Props

Prop

Type

Default

Description

open

boolean

false

Control the open state

disabled

boolean

false

Disable interaction

class

string

Additional CSS classes

Accessibility

Built-in Accessibility Features

• Proper ARIA attributes (aria-expanded, aria-controls)
• Keyboard accessible (Enter/Space to toggle)
• Focus management with visible indicators
• Screen reader announcements
• Respects prefers-reduced-motion setting

Card

Combobox