Collapse

The Collapse component allows you to show and hide content independently. It is unstyled by default, giving you the flexibility to use any content and design according to your needs.

Example

Ensure you have the Collapse component available. Below is a simple example demonstrating how to use the Chips component. This example shows how to create a chip with a basic text label:

Svelte 
<script>
  import { Collapse } from "theui-svelte";
</script>

<Collapse ariaLabel="COLLAPSE">
  {#snippet trigger()}
    <Button>Flush collapse trigger</Button>
  {/snippet}
  <p> ..... </p>
</Collapse>

The trigger snippet {#snippet trigger()} defines the trigger for the collapse. In this case, a button labeled "Flush Collapse Trigger" acts as the clickable element to toggle the collapse.

Any component outside the trigger snippet will be considered as the content of the collapse and will be revealed or hidden based on the collapse state.

Accessibility

The Collapse component is fully accessible and keyboard-friendly. The toggle element uses role="button" and is focusable with tabindex="0", allowing users to control it using the Enter or Space keys. It includes aria-expanded, aria-controls, and aria-labelledby to communicate state and relationships clearly to assistive technologies. The content area is hidden from screen readers when collapsed using aria-hidden. You can also use the ariaLabel prop to provide a custom accessible label for better context.

Configuration