Components / Layout & Navigation / Accordion

Accordion beta

Disclosure built on native <details>. Zero JavaScript, keyboard and find-in-page included.

Preview

Is there a build step?

No. Copy the CSS, paste the markup. This accordion itself runs on native details — there is no script on this page for it.

Does it work in dark mode?

Yes. Every color comes from a token, and the token set has a dark theme.

Can I change the radius?

Change --k-radius-lg once and every component follows. That is the point of the mold.

<div style="max-width:460px">
  <details class="k-acc" open>
    <summary>Is there a build step?<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
    <div class="k-acc-body">No. Copy the CSS, paste the markup. This accordion itself runs on native details — there is no script on this page for it.</div>
  </details>
  <details class="k-acc">
    <summary>Does it work in dark mode?<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
    <div class="k-acc-body">Yes. Every color comes from a token, and the token set has a dark theme.</div>
  </details>
  <details class="k-acc">
    <summary>Can I change the radius?<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
    <div class="k-acc-body">Change --k-radius-lg once and every component follows. That is the point of the mold.</div>
  </details>
</div>

/* KATA Accordion — native <details>. No JS. */
.k-acc{border:1px solid var(--k-line);border-radius:var(--k-radius-lg);background:var(--k-bg)}
.k-acc + .k-acc{margin-top:8px}
.k-acc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;font-size:13.5px;font-weight:550;cursor:pointer;list-style:none;border-radius:var(--k-radius-lg)}
.k-acc summary::-webkit-details-marker{display:none}
.k-acc summary:hover{background:var(--k-bg-soft)}
.k-acc summary:focus-visible{outline:none;box-shadow:var(--k-ring)}
.k-acc summary svg{color:var(--k-ink-3);transition:transform .18s cubic-bezier(.3,.7,.3,1);flex:none}
.k-acc[open] summary svg{transform:rotate(180deg)}
.k-acc-body{padding:2px 15px 15px;font-size:13.5px;line-height:1.8;color:var(--k-ink-2)}

Usage

For FAQs and secondary detail. The first item can start open; the rest stay shut. If content must be findable with Ctrl-F, this is the right primitive — details content is searchable.

Accessibility

<details>/<summary> is natively focusable and announced as expandable. The chevron is decorative; state comes from the element itself.

Textarea

Breadcrumbs