Checkbox 與 Select
兩個 Radix 基礎件的薄封裝。
在 Storybook 開啟勾選與下拉
什麼時候不要用 Select
✅ 這樣做
選項 6 個以上、或會動態增減 → Select。
🚫 不要這樣
選項只有 2–5 個且標籤短 → 用 SegGroup。 Select 要點兩下(開、選)才看得到全部選項;分段選擇一眼看完、一下點完。
多選需求請用 Chips,不要做 multi-select 下拉—— 選完就看不見選了什麼,是後台最常見的抱怨之一。
Checkbox 一定要配 Label
<Label htmlFor> 讓點文字也能勾選,觸控裝置上差別非常明顯(16px 的方框 vs 整行可點)。
取用
npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/checkbox.json
npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/select.json