Disclosure

A standalone Toggleable for revealing additional information.


<script lang="ts">
  import Disclosure from "$lib/components/disclosure/disclosure.svelte";

  let active = $state(false);
</script>

<label class="flex items-center gap-2">
  <input type="checkbox" bind:checked={active} /> open
</label>

<Disclosure bind:active>
  {#snippet header()}
    White Chocolate: Is It Real Chocolate?
  {/snippet}
  <div>
    Technically, white chocolate isn’t "real" chocolate because it doesn’t contain cocoa solids.
    It’s made from cocoa butter, sugar, and milk, giving it a creamy texture and a sweeter flavor.
  </div>
</Disclosure>

open

Headless component

The headless disclosure is a simple Triggerable, so the active option is bindable.

Sets the aria-controls and aria-labelled attributes, as it adheres to the Disclosure WAI-ARIA design pattern