---
outline: deep
---

# Disclosure

Disclosures are used to show and hide content sections on demand. Commonly used for FAQs, collapsible panels, and progressive disclosure of secondary information.

**`.l-disclosure`** — Native HTML Element

## Options

### Variants

Add `data-variant="bordered"` for a visual container.

```html
<details
  class="l-disclosure"
  data-variant="bordered"
  data-marker="arrow"
>
  <summary>What is Luxen UI?</summary>
  <div>Luxen UI is an HTML & CSS-first UI library built with modern CSS and web components.</div>
</details>
```

### Initially open

Native `open` attribute.

```html
<details
  class="l-disclosure"
  data-variant="bordered"
  data-marker="arrow"
  open
>
  <summary>Initially open</summary>
  <div>This disclosure starts expanded via the native <code>open</code> attribute.</div>
</details>
```

### Markers

Add `data-marker="arrow"` or `data-marker="plus"` for an animated icon indicator.

```html
<div class="flex flex-col gap-3">
  <details
    class="l-disclosure"
    data-variant="bordered"
    data-marker="arrow"
  >
    <summary>Arrow marker</summary>
    <div>Chevron icon that rotates 180° when open.</div>
  </details>
  <details
    class="l-disclosure"
    data-variant="bordered"
    data-marker="plus"
  >
    <summary>Plus marker</summary>
    <div>Plus icon that rotates 45° into a cross when open.</div>
  </details>
</div>
```

## Examples

### FAQ

Use the native `name` attribute to create an exclusive accordion — only one item open at a time. Style the container with Tailwind utilities.

```html
<div
  class="mx-auto max-w-2xl divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-900"
>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>What is Luxen UI?</summary>
    <div>
      An HTML & CSS-first UI library built with modern CSS and web components. No framework
      required.
    </div>
  </details>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>Does it require JavaScript?</summary>
    <div>
      Most elements are CSS-only. Custom elements use Lit for progressive enhancement when
      interactivity is needed.
    </div>
  </details>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>How do I install it?</summary>
    <div>
      Install via npm: <code>npm install luxen-ui</code>, then import the CSS and components you
      need.
    </div>
  </details>
  <details
    class="l-disclosure"
    data-marker="plus"
    name="faq"
  >
    <summary>Can I use it with React or Vue?</summary>
    <div>
      Yes — Luxen UI uses standard custom elements and CSS classes, which work in any framework or
      with plain HTML.
    </div>
  </details>
</div>
```

## Accessibility

### Criteria

- **Role** — Uses native `<details>` — built-in disclosure semantics, no ARIA needed
- **Accessible name** — The `<summary>` provides the accessible name automatically
- **Motion** — Animations use CSS transitions that respect `prefers-reduced-motion`

### Rules

- Always include a descriptive `<summary>` as the first child of `<details>`
- Do not override the `role` or `tabindex` on `<summary>` — native semantics are correct

### Keyboard interactions

- `Enter` — Toggles the disclosure open or closed
- `Space` — Toggles the disclosure open or closed

## API reference

### Importing

```css
@import 'luxen-ui/css/disclosure';
```

### Attributes & Properties

- **open** — Native attribute — starts the disclosure expanded.
- **name** — Native attribute — groups disclosures into an exclusive accordion.
- **data-marker**: `arrow | plus` — Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross.
- **data-variant** — bordered — Adds border, background, and border-radius.
- **disabled** — Disables interaction (set on `<details>` or `<summary>`).

### Events

- **toggle** — Fires when the disclosure opens or closes (`e.newState` is `"open"` or `"closed"`).

### CSS classes

- `.l-disclosure` — Headless base — layout, animation, and marker behavior only.

### CSS custom properties

- `--marker-size` (default: `20px`) — Marker icon size.
- `--marker-color` (default: `var(--l-color-text-tertiary)`) — Marker icon color ().