Input
Installation
import { Input } from "@olab/components";Overview
單行文字輸入框：膠囊形外框、可帶標題、說明文字、錯誤訊息與後綴。只有一種尺寸，高度固定 36px。
狀態由輸入框本身決定：聚焦時外框轉成高對比色（dark 白、light 黑）、出錯時轉紅、唯讀時外框變淡、文字轉灰。
Interactive Demo
TYPE — controlled input
Edit the field to see live state below.
value = "olivia@untitledui.com"
State Matrix
ALL STATES — static snapshot
This is a hint text to help user.
This is a hint text to help user.
This is an error message.
Same border class as :focus, forced on.
disabled only changes the cursor — no color change (spec conflict #5).
This is a hint text to help user.
Examples
SUFFIX SLOT — accepts any ReactNode
Copy
BLOCK — block=true fills parent width
Spec
| Part | Value | Source class |
|---|---|---|
| Height | 36px（單一尺寸） | h-9 |
| Width | 320px；block 時撐滿 | w-80 / w-full |
| Padding | 左右 16px | px-4 |
| Radius | 膠囊形 | rounded-full |
| Border | 1px | border border-secondary |
| Border · focus | 高對比框（dark 白 / light 黑），無 outline | has-[input:focus]:border-white |
| Border · invalid | 錯誤色 | has-[[data-invalid]]:border-error-solid |
| Border · read only | 淡框 | has-[[readonly]]:border-white-16 |
| Value text | 14px（bodyM） | text-bodyM text-primary |
| Placeholder | 次要文字 | placeholder:text-tertiary |
| Caret | 品牌色 | caret-[var(--color-bg-brand-solid)] |
| Label ↔ field ↔ helper | 間距 4px | gap-1 |
| Helper / error text | 12px（bodyS） | text-bodyS text-tertiary / text-error-solid |
| Suffix | 與輸入文字隔 8px | pl-2 |
數值為 2026-06-10 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/input.md。
Usage
Do
- 表單欄位、搜尋框、金額輸入都用它；一律 36px 高，跟 md Button 放同一排時對得齊。
- 錯誤時同時給 invalid 與 errorText，讓紅框和文字一起出現。
- 後綴（單位、Copy、清除）放進 suffix，不要自己在外面疊一層。
Don't
- 不要用 className 改高度做「大一號的 Input」；元件沒有 size，需要就先在元件層定義。
- 不要只靠 placeholder 說明欄位用途；placeholder 一打字就不見，用 label。
- 需要前置 icon 時不要硬塞進 value；元件目前只有 suffix，這是已知缺口。
Links
- Measured spec
- live-ds-spec/input.md