Input (am-input)

am-input 用於 email、電話、搜尋或短文字。搭配 Field 提供持續可見的標籤、提示與錯誤說明；placeholder 不應取代 label。

使用

先依安裝指南 引入樣式，再複製完整範例：

---
import Field from '@astromer/core/components/Field.astro';
import Input from '@astromer/core/components/Input.astro';
---
<Field controlId="contact-name" label="聯絡人姓名" required={true}>
  <Input id="contact-name" name="contactName" autocomplete="name" required />
</Field>

Field.controlId 與 Input.id 必須相同，且每組欄位 ID 在頁面內唯一。name 決定原生表單送出的欄位名稱。

查看表單元件示範。較長內容請使用 Textarea。

Props

Prop	可用值／型別	預設	用途
type	text、email、password、search、tel、url、number	text	原生輸入類型與相應鍵盤
size	sm、md、lg	md	元件尺寸
invalid	boolean	false	錯誤外觀與 aria-invalid
disabled	boolean	false	停用輸入；原生表單不提交停用欄位
required	boolean	false	原生必填驗證
id、name	string	未設定	標籤關聯與表單欄位名稱
autocomplete	原生 autocomplete 值	未設定	協助自動填寫
class	string	未設定	附加樣式 class

其他原生 input attributes 可直接傳入，例如 value、placeholder、readonly、min、max、inputmode。Input 沒有內容 slot。

錯誤與停用狀態

---
import Field from '@astromer/core/components/Field.astro';
import Input from '@astromer/core/components/Input.astro';
---
<Field controlId="contact-email" label="電子郵件" error="請輸入有效的電子郵件地址。">
  <Input id="contact-email" name="email" type="email" autocomplete="email" invalid aria-describedby="contact-email-error" />
</Field>
<Field controlId="assigned-code" label="系統編號">
  <Input id="assigned-code" value="等待指派" disabled />
</Field>

Field 的錯誤 ID 為 ${controlId}-error、提示 ID 為 ${controlId}-hint；請在 Input 的 aria-describedby 明確引用，兩者並存時以空格串接。

invalid 不會自行驗證資料，請由 consumer 判斷錯誤並同時提供可讀的修正提示。輸入會以 Tab 移入、使用原生文字編輯鍵操作；請保留焦點樣式，避免只用顏色表達錯誤。