Collapsible — ARC UI

Components

Collapsible

content

interactive

<arc-collapsible>

Overview

Guidelines

When to use

Use Collapsible for optional or secondary content that does not need to be visible by default
Provide a clear, descriptive `heading` so users know what the hidden content contains
Set `open` declaratively when the content should be visible on initial render
Use multiple Collapsibles in a stack for FAQ-style sections without mutual exclusion
Listen to `arc-toggle` to persist the open/closed state across sessions if needed

When not to use

Do not use Collapsible for primary content that users must see -- keep it visible instead
Do not nest Collapsibles more than one level deep -- it creates confusing disclosure hierarchies
Do not use Collapsible when you need only-one-open-at-a-time behaviour -- use Accordion instead
Do not leave the `heading` empty -- the trigger button needs visible text for usability and accessibility
Avoid placing very tall content inside a Collapsible without a scrollable wrapper -- it can push the page layout significantly

Features

Smooth expand/collapse animation using CSS `grid-template-rows` transition (no JS measurement)
Chevron indicator rotates from 0 to 90 degrees to signal open/closed state
Heading row with hover highlight and inset accent-primary focus ring
Reflected `open` attribute for declarative or programmatic state control
ARIA `aria-expanded` on the trigger button and `role="region"` on the content area
Fires `arc-toggle` event with `{ open: boolean }` detail on every state change
Keyboard support: Enter and Space toggle the disclosure from the heading button
Respects `prefers-reduced-motion` by disabling all transitions

Preview

These settings control fine-grained behaviour that most users will not need to change.

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-collapsible heading="More Details">
  <p>Hidden content revealed on click.</p>
</arc-collapsible>

import { Collapsible } from '@arclux/arc-ui-react';

<Collapsible heading="More Details">
  <p>Hidden content revealed on click.</p>
</Collapsible>

<script setup>
import { Collapsible } from '@arclux/arc-ui-vue';
</script>

<template>
  <Collapsible heading="More Details">
    <p>Hidden content revealed on click.</p>
  </Collapsible>
</template>

<script>
  import { Collapsible } from '@arclux/arc-ui-svelte';
</script>

<Collapsible heading="More Details">
  <p>Hidden content revealed on click.</p>
</Collapsible>

import { Component } from '@angular/core';
import { Collapsible } from '@arclux/arc-ui-angular';

@Component({
  imports: [Collapsible],
  template: `
    <Collapsible heading="More Details">
      <p>Hidden content revealed on click.</p>
    </Collapsible>
  `,
})
export class MyComponent {}

import { Collapsible } from '@arclux/arc-ui-solid';

<Collapsible heading="More Details">
  <p>Hidden content revealed on click.</p>
</Collapsible>

import { Collapsible } from '@arclux/arc-ui-preact';

<Collapsible heading="More Details">
  <p>Hidden content revealed on click.</p>
</Collapsible>

API

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls whether the content is visible. Reflected as an attribute and toggleable by clicking the heading.
`heading`	`string`	`''`	Text displayed in the clickable trigger row. Also used as the ARIA label for the content region.

Events

Event	Description
`arc-toggle`	Fired when the collapsible expands or collapses