Stepper 步驟指示
多步驟流程走到哪了。
步驟指示（可點擊回頭）
外觀不變量：無框透明按鈕
每一步是透明、無邊框的按鈕——外框不是這個元件的語彙。狀態只靠三樣東西表達：
圓圈的 border-2 實線（todo 是 muted-foreground 30%）、完成態的 ✓ 圖示、
連接線的色塊（背景色塊，不是 border）。
步驟出現灰底或立體外框，代表宿主沒有提供元件的樣式基座（瀏覽器原生按鈕外觀漏了出來）。
本站的活範例由渲染守衛 npm run verify:book 驗收這一條，機制見 ADR-0010。
步驟一定要可以點回去
多步驟表單最常見的挫折：「我想回去確認第 2 步填了什麼，但只能一路取消重來。」
✅ 這樣做
已完成與已走過的步驟都可點擊回頭，資料保留。
🚫 不要這樣
不要做成單向流程。使用者會回頭確認，這是正常行為，不是誤操作。
完成態用勾選，不只用綠色
state === "done" 顯示 ✓ 圖示。綠色圓圈在灰階列印與色覺障礙下與「目前步驟」分不開。
何時不要用
✅ 這樣做
步驟 3–6、順序有意義、使用者需要知道還剩幾步。
🚫 不要這樣
只有 2 步不需要 Stepper（一個標題就夠）。 超過 6 步該考慮拆成不同頁面或分組——沒有人會在 8 步表單裡感覺良好。
超過建議上限時會怎樣
上一節說「超過 6 步該拆」。但總會有人拆不了（法規流程、外部系統的既定關口）， 所以要說清楚沒拆會發生什麼，而不是留白讓人自己發明。
實際塞 10 步之後：
| 現象 | 後果 |
|---|---|
| 每步的寬度被均分 | 步驟標籤只剩兩三個字的空間，長標籤截斷後幾乎讀不出差別 |
| 連接線變得比圓點還顯眼 | 視覺重心跑到線上，「我在第幾步」反而要找 |
| 目前步驟的位置偏移 | 第 7 步在畫面正中間，看起來像才走到一半（其實快完成了） |
✅ 這樣做
拆不了的時候，分組：把 10 步收成 3 個階段， Stepper 顯示階段，階段內部用頁面標題表示第幾小步。
🚫 不要這樣
不要橫向捲動 Stepper。使用者得先捲動才知道自己在哪裡—— 而「我在哪裡」正是這個元件存在的唯一理由。
步驟標籤要寫動詞，不要寫名詞
步驟多了之後，這件事的差別會被放大：
✅ 這樣做
「選擇單位」「加入項目」「確認送出」——一眼知道要做什麼。
🚫 不要這樣
「單位」「項目」「確認」——名詞只說了主題。 使用者到第 7 步時會開始問「這步到底要我幹嘛」。
取用
npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/stepper.json