FAQ 手風琴區塊
含即時搜尋過濾與分類籤的常見問題手風琴區塊。
完整的常見問題區塊：頂部搜尋框即時過濾並高亮命中關鍵字，分類籤的選中底塊以 spring 流動切換，問題以高度動畫展開收合、箭頭同步旋轉，搜尋無結果時顯示空狀態，適合直接放進行銷頁或說明中心。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0
<FaqAccordionSection />
安裝
npx shadcn@latest add https://webberui.com/r/faq-accordion-section.json或在 components.json 設定 registries 後，改用 @webberui/faq-accordion-section 安裝。
安裝依賴後，從 registry JSON（/r/faq-accordion-section.json 的 files[0].content）複製 faq-accordion-section.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { FaqAccordionSection } from "@/components/ui/faq-accordion-section";
<FaqAccordionSection
title="常見問題"
subtitle="找不到答案？歡迎聯絡客服"
items={[
{
category: "方案與計費",
question: "可以隨時取消訂閱嗎？",
answer: "可以，取消後仍可使用至當期結束。",
},
{
category: "帳戶",
question: "忘記密碼該怎麼辦？",
answer: "在登入頁點選「忘記密碼」，重設連結會寄到你的信箱。",
},
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | FaqItem[] | — | FAQ 項目資料，每項含 question、answer 與選填 category |
title | string | "常見問題" | 區塊主標題 |
subtitle | string | — | 主標題下方的副標說明文字 |
searchPlaceholder | string | "搜尋問題關鍵字…" | 搜尋框的提示文字 |
showCategories | boolean | true | 是否顯示分類籤列（分類自 items 自動收集） |
allLabel | string | "全部" | 「全部」分類籤的顯示文字 |
emptyText | string | "找不到符合的問題，換個關鍵字試試" | 搜尋無結果時的空狀態文字 |
defaultOpenIndex | number | 0 | 預設展開的項目索引（對應 items 原始順序），-1 表示全部收合 |
className | string | — | 透傳到最外層 <section> 容器 |
可及性
- 每個問題按鈕帶
aria-expanded與aria-controls，答案面板以role="region"加aria-labelledby關聯，輔助科技可正確朗讀展開狀態 - 分類籤為原生
<button>並以aria-pressed標示選中狀態，可完整鍵盤操作 - 搜尋結果數量透過
aria-live="polite"區域即時播報，無結果時播報空狀態文字 - 使用者系統開啟「減少動態效果」時，展開收合、分類底塊與列表進出場動畫全部改為直接切換