Chips 多選標籤片
多選，而且已選與未選同時看得見。
在 Storybook 開啟為什麼不用多選下拉
多選下拉最大的問題是「選完就看不見選了什麼」。而在後台系統裡， 使用者按下送出前，幾乎一定會想再確認一次自己勾了哪些。
✅ 這樣做
選項固定且不多（≤ 12）、使用者需要對照著選。
🚫 不要這樣
選項上百個（例如全部項目）→ 那需要的是帶搜尋的多選面板， 不是把 100 個標籤片攤在畫面上。
多選
四種狀態要一次看完
Chips 有四種狀態，而它們的差別只有並排時才看得出來。 分開展示時，每一種看起來都「就是個標籤片」。
四態並列
預設
已改動未送出（琥珀）
鎖定（可聚焦，hover 有原因）
沒有選項可選
尚未建立任何管道選項
這是文件本身的規格，不是排版偏好。 四態分開展示時， 沒有人會發現「鎖定」和「已改動」在深色模式下的邊框亮度只差一階——並排就會立刻看到。 SegGroup 已經這樣做了，Chips 應該一致。
沒有選項時要說話，不是消失
options 為空陣列時，元件顯示 emptyHint 文字，而不是整塊不見。
✅ 這樣做
emptyHint 寫出為什麼沒有選項，能引導就引導：
「尚未建立任何管道選項」。
🚫 不要這樣
不要讓整個欄位消失。使用者會以為表單壞了，或以為自己沒有權限—— 兩種猜測都會變成一通求助電話。
這和 EmptyState 是同一條原則的小尺寸版本： 空的東西也要說明自己為什麼空。
無障礙
role="group"裡放一組role="checkbox"（不是 radiogroup——可複選）- Roving tabindex ＋ 方向鍵移動、Space/Enter 切換、Esc 收合
- 選中同時打勾與填色
取用
npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/chips.json