Accordion

ネイティブのdetails要素を使った、開閉できるセクションのまとまり。

ブラウザー: Chrome 123+Firefox 121+Safari 17.5+
ティア: 0
圧縮後のサイズ: 511 B
強制レイアウトの上限: 0 ms
axe の上限: 0
SSR 対応: はい
基盤となる要素: elements/details
公開された契約: テストハーネス

プレイグラウンド

Accordion

Single

Shipping

Ships in 2–3 days.

Returns

30-day return window.

Multiple

Shipping

Ships in 2–3 days.

Returns

30-day return window.

React

CSS

Tailwind

import { Accordion } from "@gunkin/uiify";

export default function Example() {
  return (
    <Accordion
      className=""
      id="faq"
      type="single"
      defaultValue="shipping"
      items={[
        { value: "shipping", label: "Shipping", panel: <>Ships in 2–3 days.</> },
        { value: "returns", label: "Returns", panel: <>Returns are accepted for 30 days.</> },
      ]}
    />
  );
}

/* Accordion — built on native <details>/<summary>. Item is the <details>,
   trigger the <summary>, content a div. A rotating chevron tracks open state.
   [data-part] selectors keep the public anatomy independent from consumer classes. */

@layer components {
  :where([data-uiify-accordion]) {
    inline-size: 100%;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-xl);
    corner-shape: squircle;
    overflow: hidden;
  }

  [data-uiify-accordion] > [data-part="item"] {
    border-block-end: var(--border-width) solid var(--border);
  }

  [data-uiify-accordion] > [data-part="item"]:last-child {
    border-block-end: none;
  }

  [data-uiify-accordion] [data-part="trigger"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    font-weight: var(--weight-medium);
    cursor: pointer;
    list-style: none;
  }

  [data-uiify-accordion] [data-part="trigger"]::-webkit-details-marker {
    display: none;
  }

  [data-uiify-accordion] [data-part="trigger"]:hover {
    background-color: var(--secondary);
  }

  [data-uiify-accordion] [data-part="trigger"]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 16%, transparent);
  }

  /* Chevron. */
  [data-uiify-accordion] [data-part="trigger"]::after {
    content: "+";
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: 0 0 1.5rem;
    color: var(--muted-foreground);
    font:
      1.25rem/1 ui-monospace,
      monospace;
    transition: rotate var(--duration-fast) var(--ease-out);
  }

  [data-uiify-accordion] [data-part="item"][open] > [data-part="trigger"]::after {
    content: "−";
  }

  [data-uiify-accordion] [data-part="item"][open] > [data-part="trigger"] {
    color: var(--primary);
  }

  [data-uiify-accordion] {
    interpolate-size: allow-keywords;
  }

  [data-uiify-accordion] > [data-part="item"]::details-content {
    block-size: 0;
    overflow: clip;
  }

  [data-uiify-accordion] > [data-part="item"][open]::details-content {
    block-size: auto;
  }

  /* Shared presence timing; block-size only interpolates where the block above applies. */
  @media (prefers-reduced-motion: no-preference) {
    [data-uiify-accordion] > [data-part="item"]::details-content {
      opacity: 0;
      transition:
        opacity var(--duration-fast) var(--ease-out),
        block-size var(--duration-fast) var(--ease-out),
        content-visibility var(--duration-fast) allow-discrete;
    }

    [data-uiify-accordion] > [data-part="item"][open]::details-content {
      opacity: 1;
    }
  }

  [data-uiify-accordion] [data-part="panel"] {
    padding-block: 0 var(--space-lg);
    padding-inline: var(--space-lg);
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }
}

import { Accordion } from "@gunkin/uiify";

export default function Example() {
  return (
    <Accordion
      className={
        "[inline-size:100%] border-[length:var(--border-width)] border-solid border-border rounded-xl [corner-shape:" +
        "squircle] overflow-hidden [&>[data-part=item]]:[border-block-end-width:var(--border-width)] [&>[data-part=i" +
        "tem]]:[border-block-end-style:solid] [&>[data-part=item]]:[border-block-end-color:var(--border)] [&>[data-p" +
        "art=item]:last-child]:[border-block-end:none] [&_[data-part=trigger]]:flex [&_[data-part=trigger]]:items-ce" +
        "nter [&_[data-part=trigger]]:justify-between [&_[data-part=trigger]]:gap-md [&_[data-part=trigger]]:p-lg [&" +
        "_[data-part=trigger]]:text-sm [&_[data-part=trigger]]:[line-height:var(--leading-normal)] [&_[data-part=tri" +
        "gger]]:font-[number:var(--weight-medium)] [&_[data-part=trigger]]:cursor-pointer [&_[data-part=trigger]]:li" +
        "st-none [&_[data-part=trigger]::-webkit-details-marker]:hidden [&_[data-part=trigger]:hover]:bg-secondary [" +
        "&_[data-part=trigger]:focus-visible]:[outline:none] [&_[data-part=trigger]:focus-visible]:[box-shadow:inset" +
        "_0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [&_[data-part=trigger]::after]:" +
        "content-[\"+\"] [&_[data-part=trigger]::after]:grid [&_[data-part=trigger]::after]:place-items-center [&_[dat" +
        "a-part=trigger]::after]:[inline-size:1.5rem] [&_[data-part=trigger]::after]:[block-size:1.5rem] [&_[data-pa" +
        "rt=trigger]::after]:[flex:0_0_1.5rem] [&_[data-part=trigger]::after]:text-muted-foreground [&_[data-part=tr" +
        "igger]::after]:not-italic [&_[data-part=trigger]::after]:[font-variant:normal] [&_[data-part=trigger]::afte" +
        "r]:font-normal [&_[data-part=trigger]::after]:[font-stretch:normal] [&_[data-part=trigger]::after]:[font-si" +
        "ze:1.25rem] [&_[data-part=trigger]::after]:leading-none [&_[data-part=trigger]::after]:[font-family:ui-mono" +
        "space,_monospace] [&_[data-part=trigger]::after]:[transition:rotate_var(--duration-fast)_var(--ease-out)] [" +
        "&_[data-part=item][open]>[data-part=trigger]::after]:content-[\"−\"] [&_[data-part=item][open]>[data-part=tri" +
        "gger]]:text-primary [interpolate-size:allow-keywords] [&>[data-part=item]::details-content]:[block-size:0] " +
        "[&>[data-part=item]::details-content]:overflow-clip [&>[data-part=item][open]::details-content]:[block-size" +
        ":auto] motion-safe:[&>[data-part=item]::details-content]:opacity-0 motion-safe:[&>[data-part=item]::details" +
        "-content]:[transition:opacity_var(--duration-fast)_var(--ease-out),_block-size_var(--duration-fast)_var(--e" +
        "ase-out),_content-visibility_var(--duration-fast)_allow-discrete] motion-safe:[&>[data-part=item][open]::de" +
        "tails-content]:opacity-100 [&_[data-part=panel]]:[padding-block:0_var(--space-lg)] [&_[data-part=panel]]:px" +
        "-lg [&_[data-part=panel]]:text-muted-foreground [&_[data-part=panel]]:text-sm [&_[data-part=panel]]:[line-h" +
        "eight:var(--leading-normal)]"
      }
      id="faq"
      type="single"
      defaultValue="shipping"
      items={[
        { value: "shipping", label: "Shipping", panel: <>Ships in 2–3 days.</> },
        { value: "returns", label: "Returns", panel: <>Returns are accepted for 30 days.</> },
      ]}
    />
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('[inline-size:100%] border-[length:var(--border-width)] border-solid border-border rounded-xl [corner-shape:squircle] overflow-hidden [&>[data-part=item]]:[border-block-end-width:var(--border-width)] [&>[data-part=item]]:[border-block-end-style:solid] [&>[data-part=item]]:[border-block-end-color:var(--border)] [&>[data-part=item]:last-child]:[border-block-end:none] [&_[data-part=trigger]]:flex [&_[data-part=trigger]]:items-center [&_[data-part=trigger]]:justify-between [&_[data-part=trigger]]:gap-md [&_[data-part=trigger]]:p-lg [&_[data-part=trigger]]:text-sm [&_[data-part=trigger]]:[line-height:var(--leading-normal)] [&_[data-part=trigger]]:font-[number:var(--weight-medium)] [&_[data-part=trigger]]:cursor-pointer [&_[data-part=trigger]]:list-none [&_[data-part=trigger]::-webkit-details-marker]:hidden [&_[data-part=trigger]:hover]:bg-secondary [&_[data-part=trigger]:focus-visible]:[outline:none] [&_[data-part=trigger]:focus-visible]:[box-shadow:inset_0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_16%,_transparent)] [&_[data-part=trigger]::after]:content-["+"] [&_[data-part=trigger]::after]:grid [&_[data-part=trigger]::after]:place-items-center [&_[data-part=trigger]::after]:[inline-size:1.5rem] [&_[data-part=trigger]::after]:[block-size:1.5rem] [&_[data-part=trigger]::after]:[flex:0_0_1.5rem] [&_[data-part=trigger]::after]:text-muted-foreground [&_[data-part=trigger]::after]:not-italic [&_[data-part=trigger]::after]:[font-variant:normal] [&_[data-part=trigger]::after]:font-normal [&_[data-part=trigger]::after]:[font-stretch:normal] [&_[data-part=trigger]::after]:[font-size:1.25rem] [&_[data-part=trigger]::after]:leading-none [&_[data-part=trigger]::after]:[font-family:ui-monospace,_monospace] [&_[data-part=trigger]::after]:[transition:rotate_var(--duration-fast)_var(--ease-out)] [&_[data-part=item][open]>[data-part=trigger]::after]:content-["−"] [&_[data-part=item][open]>[data-part=trigger]]:text-primary [interpolate-size:allow-keywords] [&>[data-part=item]::details-content]:[block-size:0] [&>[data-part=item]::details-content]:overflow-clip [&>[data-part=item][open]::details-content]:[block-size:auto] motion-safe:[&>[data-part=item]::details-content]:opacity-0 motion-safe:[&>[data-part=item]::details-content]:[transition:opacity_var(--duration-fast)_var(--ease-out),_block-size_var(--duration-fast)_var(--ease-out),_content-visibility_var(--duration-fast)_allow-discrete] motion-safe:[&>[data-part=item][open]::details-content]:opacity-100 [&_[data-part=panel]]:[padding-block:0_var(--space-lg)] [&_[data-part=panel]]:px-lg [&_[data-part=panel]]:text-muted-foreground [&_[data-part=panel]]:text-sm [&_[data-part=panel]]:[line-height:var(--leading-normal)]');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

API

`Accordion`

Prop	型	既定値	説明
`id`*	`string`	—	contextなしでsummaryとpanelをつなぐ、決定的なIDの基になる値。
`items`*	`readonly AccordionItem[]`	—	各項目は{ value, label, panel?, disabled? }です。
`type`	`"single" \| "multiple"`	`"single"`	同時に1つだけ開けるか、複数の項目を開けるか。
`defaultValue`	`string \| readonly string[] \| undefined`	—	初回レンダリング時に開く項目。非制御なのでJavaScriptなしでも維持されます。
`className`	`string`	—	アコーディオンのルートに適用するクラス。

キーボード

キー	操作
`Enter` / `Space`	セクションを開閉
`Tab`	トリガー間を移動

アクセシビリティ

ネイティブの<details>と<summary>を組み合わせます。展開状態はJSなしで読み取れます。

スタイリングのフック

data-state

フレームワーク

スタイル

テーマ

言語

Accordion

プレイグラウンド

Accordion

Single

Multiple

API

`Accordion`

キーボード

アクセシビリティ

スタイリングのフック