跳至主要内容
💬 回報這一頁

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