検索可能アコーディオン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",
      "認証",
      "セキュリティ"
    ]
  }
];

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

  return (
    <SearchableAccordion
      items={items}
      searchValue={searchValue}
      onSearchValueChange={setSearchValue}
      categories={[
        { id: "account", label: "アカウント" },
        { id: "team", label: "チーム" },
        { id: "security", label: "セキュリティ" },
      ]}
      labels={{
        searchPlaceholder: "項目を検索...",
        clearSearchLabel: "検索語を消去",
        allCategoryLabel: "すべて",
        resultCountLabel: (visible, total) =>
          `${visible} / ${total} 件を表示`,
        clearFiltersLabel: "条件をクリア",
        emptyTitle: "一致する項目がありません",
        emptyDescription: "検索語やカテゴリを変更してください。",
      }}
    />
  );
}

使用コンポーネント

SearchableAccordionAccordionGroupSearchInputTabsEmptyStateBadge

関連コンポーネント

AccordionGroupSearchInputFilterButton