Skies.ui元件 (Components)
Input 與 Label 輸入
Skies.ui Input：主題邊框、焦點環、aria-invalid 的原生 input（預設 type=text）。Label 為 Radix，以 htmlFor／id 對齊；可將 Input 包在 Label 內。邊框與焦點環與全庫一致。
多行文字請使用 Textarea。
與 Select 的
SelectLabel（下拉群組標題）不同；表單欄位請用本頁的Label。
範例與用法
搜尋列、工具列等已有外層說明或 aria-label 時可單獨使用 Input：
import { Input } from "@skies-ui/ui";
<Input placeholder="搜尋…" aria-label="搜尋" />安裝
npx skies-ui@latest add input見 安裝與 CLI。Label 通常與 input 一併下發（同一檔案或依 registry 結構）。
標籤 + 欄位
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 直接使用。