PinInput
Installation
import { PinInput } from "@olab/components";Overview
驗證碼輸入：一排 64px 見方的格子，每格一個字元，打完一格自動跳到下一格，可以整串貼上。格子數由 length 決定，預設 3 格。
空格顯示淡灰的「0」；有值的格子字變品牌色、外框轉成品牌色。
Interactive Demo
TYPE — controlled 6-digit code
value = []
State Matrix
STATIC — empty / partial / filled / disabled
empty
partial
filled
disabled
沒有 focus 與 disabled 的專屬樣式：游標所在的格子只看得到閃爍的游標，disabled 外觀跟一般狀態相同（見 Spec）。
Examples
LENGTH — common pin sizes
length=3 (default)
length=4
length=6
Spec
| Part | Value | Source class |
|---|---|---|
| Box | 64 × 64px，20px 圓角，1px 外框 | h-16 w-16 rounded-2xl border |
| Box gap | 8px | gap-2 |
| Box · empty | 淡底、外框透明 | bg-white-04 border-transparent |
| Box · filled | 品牌色外框（80%） | [&:not([value=''])]:border-brand-8 |
| Box · focus / disabled | 沒有定義 | |
| Digit | 38px，行高 40px，字距 -0.02em，置中 | text-[38px] leading-10 tracking-[-0.02em] |
| Digit color | 品牌色 | text-brand-secondary |
| Placeholder | 「0」，淡字 | placeholder:text-quaternary |
數值為 2026-06-11 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/pin-input.md。
Usage
Do
- 簡訊、Email 驗證碼、交易確認碼這類固定長度的短碼。
- 純數字碼用 type="numeric"，手機會跳出數字鍵盤。
- 格子上方寫清楚碼寄到哪裡、幾位數。
Don't
- 不要拿來輸入長度不固定的內容（密碼、金額）；那是 Input 的工作。
- 不要超過 6 格；更長的碼請改用一般輸入框。
- 不要只靠格子顏色告訴使用者碼錯了；錯誤要用文字說明。
Links
- Measured spec
- live-ds-spec/pin-input.md