Skies.ui元件 (Components)
Input 與 Label 輸入
Skies.ui Input 與 Label：表單文字欄位、Radix Label、邊框與焦點環與全庫一致；可獨用或組合。
Input 與 Label 輸入
Input 是帶主題邊框、焦點環與 aria-invalid 樣式的原生 <input>（預設 type="text"）。Label 基於 Radix Label，與控制項以 htmlFor / id 對齊；表單內也可把 Input 包在 Label 內（較少用於複雜版面）。
多行文字請使用 Textarea。
與 Select 的
SelectLabel（下拉群組標題）不同；表單欄位請用本頁的Label。
僅輸入框（無標籤）
適合搜尋列、工具列等已有外層說明或 aria-label 的情境。
import { Input } from "@skies-ui/ui";
<Input placeholder="搜尋…" aria-label="搜尋" />標籤 + 欄位
Input 已內建 peer class，與 Label 並列時，停用欄位可讓標籤呈現 peer-disabled 狀態。
import { Input, Label } from "@skies-ui/ui";
<div className="grid gap-2">
<Label htmlFor="email">電子郵件</Label>
<Input id="email" type="email" placeholder="you@example.com" />
</div>說明文字與錯誤
建議用 grid gap-1.5 包住 Label、輸入、說明；驗證失敗時在 Input 上加 aria-invalid（必要時搭配 aria-describedby 指到錯誤訊息）。
至少需要 3 個字元。
<Label htmlFor="alias">帳號</Label>
<Input id="alias" aria-invalid aria-describedby="alias-error" />
<p id="alias-error" className="text-sm text-destructive">
至少需要 3 個字元。
</p>停用
API 摘要
| 元件 | 說明 |
|---|---|
Input | 原生 input；type、placeholder、disabled、aria-invalid 等皆沿用 HTML |
Label | Radix Label；請與控制項 id 以 htmlFor 對應 |
Label 為 Client Component；Input 可於 Server Component 直接使用。