Disclosure <details>

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

HTML tag<details>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Native HTML Element

Options

Variants

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

What is Luxen UI?

Luxen UI is an HTML & CSS-first UI library built with modern CSS and web components.

Code

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.

Initially open

This disclosure starts expanded via the native open attribute.

Code

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.

Arrow marker

Chevron icon that rotates 180° when open.

Plus marker

Plus icon that rotates 45° into a cross when open.

Code

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.

What is Luxen UI?

An HTML & CSS-first UI library built with modern CSS and web components. No framework required.

Does it require JavaScript?

Most elements are CSS-only. Custom elements use Lit for progressive enhancement when interactivity is needed.

How do I install it?

Install via npm: npm install luxen-ui, then import the CSS and components you need.

Can I use it with React or Vue?

Yes — Luxen UI uses standard custom elements and CSS classes, which work in any framework or with plain HTML.

Code

HTML

<div
  class="mx-auto max-w-2xl divide-y divide-gray-200 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 class="text-base font-semibold">What is Luxen UI?</summary>
    <div class="text-sm text-gray-500 dark:text-gray-400">
      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 class="text-base font-semibold">Does it require JavaScript?</summary>
    <div class="text-sm text-gray-500 dark:text-gray-400">
      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 class="text-base font-semibold">How do I install it?</summary>
    <div class="text-sm text-gray-500 dark:text-gray-400">
      Install via npm:
      <code
        class="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-700 dark:bg-gray-800 dark:text-gray-300"
        >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 class="text-base font-semibold">Can I use it with React or Vue?</summary>
    <div class="text-sm text-gray-500 dark:text-gray-400">
      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

WCAG4.1.2

RGAA7.1

Accessible name

The <summary> provides the accessible name automatically

WCAG4.1.2

Motion

Animations use CSS transitions that respect prefers-reduced-motion

WCAG2.3.3

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

openAttribute

Native attribute — starts the disclosure expanded

nameAttribute

Native attribute — groups disclosures into an exclusive accordion

data-marker="arrow"Attribute

Shows a chevron icon that rotates 180° when open

data-marker="plus"Attribute

Shows a plus icon that rotates 45° into a cross when open

data-variant="bordered"Attribute

Adds border, background, and border-radius

disabledAttribute

Disables interaction on the disclosure (set on <details> or <summary>)

Events

toggleEvent

Fires when the disclosure opens or closes (e.newState is "open" or "closed")

CSS classes

.l-disclosureClass

Headless base — layout, animation, and marker behavior only

CSS custom properties

--marker-sizeName

Marker icon size (default: 20px)

--marker-colorName

Marker icon color (default: var(--l-color-text-tertiary))