検索可能アコーディオンSearchableAccordionExperimental

検索入力、カテゴリ、件数表示、該当なし表示を組み合わせたアコーディオンです。

プレビュー

状態とバリエーション

カテゴリ付き

検索語とカテゴリタブで FAQ やヘルプ項目を絞り込みます。

ヘルプ項目

検索語とカテゴリで項目を絞り込みます。

3 / 3 件を表示すべて

検索のみ

カテゴリが不要な短い一覧では検索だけを表示します。

3 / 3 件を表示All

該当なし

一致する項目がない場合は EmptyState と条件クリアを表示します。

0 / 3 件を表示すべて

一致する項目がありません

検索語やカテゴリを変更してください。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
itemsSearchableAccordionItem[]-表示する accordion 項目です。検索用に category / keywords / searchText を渡せます。
searchValue / defaultSearchValue / onSearchValueChangestring / (value) => void-検索語の controlled / uncontrolled API です。
categoryValue / defaultCategoryValue / onCategoryValueChangestring / (value) => void-カテゴリタブの controlled / uncontrolled API です。
openValue / defaultOpenValue / onOpenValueChangestring[] / (value) => void-開いている項目の controlled / uncontrolled API です。
labelsSearchableAccordionLabels-検索、件数、該当なし、全展開操作の文言です。

使い方

import * as React from "react";
import { SearchableAccordion, type SearchableAccordionItem } from "@gunjo/ui";

const items: SearchableAccordionItem[] = [
  {
    "id": "billing",
    "title": "請求先情報はどこで変更できますか？",
    "body": "ワークスペース設定の請求から、請求先、支払い方法、請求メールの送信先を変更できます。",
    "category": "account",
    "keywords": [
      "請求",
      "支払い",
      "メール"
    ]
  },
  {
    "id": "invites",
    "title": "メンバー招待が届かない場合は？",
    "body": "迷惑メール、招待リンクの有効期限、許可ドメインを確認してください。",
    "category": "team",
    "keywords": [
      "招待",
      "メンバー",
      "チーム"
    ]
  },
  {
    "id": "mfa",
    "title": "二要素認証を必須にできますか？",
    "body": "管理者はセキュリティ設定から、全メンバーに二要素認証を必須化できます。",
    "category": "security",
    "keywords": [
      "2FA",
      "認証",
      "セキュリティ"
    ]
  }
];

const categories = [
  { id: "account", label: "アカウント" },
  { id: "team", label: "チーム" },
  { id: "security", label: "セキュリティ" },
];

export function HelpAccordion() {
  const [searchValue, setSearchValue] = React.useState("");

  return (
    <SearchableAccordion
      items={items}
      searchValue={searchValue}
      onSearchValueChange={setSearchValue}
      categories={categories}
      labels={{
        searchPlaceholder: "項目を検索...",
        clearSearchLabel: "検索語を消去",
        allCategoryLabel: "すべて",
        resultCountLabel: (visible, total) => visible + " / " + total + " 件を表示",
        clearFiltersLabel: "条件をクリア",
        emptyTitle: "一致する項目がありません",
        emptyDescription: "検索語やカテゴリを変更してください。",
      }}
    />
  );
}

設計の判断

  • 探す手段を2つ重ねた。検索の文字と分類のタブを両方持ち、両方を満たす項目だけを出します。資料はアコーディオンの核を「何を隠すか」に置いていますが、項目が数十件になると「隠した中から探す」が要るので、そこを部品に足しました。件数は「12 / 48」の形で常に出します。
  • 開閉は複数同時にできる形にした。資料は「FAQ は複数展開が向く」と書いています。この部品は AccordionGroup を使い、いま見えている項目だけをまとめて開く・閉じるボタンを持ちます。絞り込んだ結果に対してだけ効くので、隠れている項目が勝手に開くことはありません。
  • 0件のときに手当てを出す。一方、既定で開く項目はまだ決めていません。一致が無いときは EmptyState を出し、絞り込みが効いているときだけ「条件を消す」ボタンを添えます。資料が挙げている「最もよく参照される1〜2項目を既定で開いておく」はまだ書いていません。いまは全部閉じた状態から始まり、defaultOpenValue を呼ぶ側が渡さなければ何も開きません。
    一般のアコーディオンの設計は UIXHERO の「アコーディオン」にあります。 UIXHERO: アコーディオン（Accordion）

使用コンポーネント

SearchableAccordionAccordionGroupSearchInputTabsEmptyStateBadge

関連コンポーネント

AccordionGroupSearchInputFilterButton