表單欄位

CommonFormField 負責 label 與錯誤訊息，CommonFormControl 負責輸入本身。兩者搭配使用，不要各自單獨用。

欄位容器

CommonFormField

components/Common/Form/Field.vue

把 label、必填標記、錯誤訊息集中在這一層，裡面放什麼控制項都可以。錯誤訊息同時傳給 Field 與 Control —— 前者負責顯示文字，後者負責把邊框變成錯誤色。

搭配 Control 使用

* 姓名

CommonFormControl

components/Common/Form/Control.vue

全站的輸入框都走這一個元件，用 type 切換行為。兩種下拉的差別：select 是客製化選單（含 floating-ui 轉向偵測，樣式可控）， ogSelect 是原生 <select> 改外觀（行動裝置上會叫出系統選單，體驗較好）。

文字輸入

密碼（可切換明碼）

錯誤狀態

Email

請輸入正確的 Email 格式

名稱	型別	預設值	說明
`modelValue`	String \| Number	''	用 v-model 綁定
`name`*	String	''	表單欄位名稱
`id`	String	''	搭配 CommonFormField 的 labelFor
`type`	'text' \| 'textarea' \| 'select' \| 'ogSelect' \| 'email' \| 'password' \| 'date' \| 'tel' \| 'number' \| 'url'	'text'	select 是客製化下拉（含 floating-ui 轉向偵測），ogSelect 是原生 select 改外觀
`options`	Array<{ label, value }>	[]	select / ogSelect 用
`placeholder`	String	''
`icon`	String	''	欄位內的圖示
`required`	Boolean	false
`disabled`	Boolean	false
`error`	String	''
`maxlength`	String \| Number	null
`autocomplete`	String	''
`inputmode`	String	''	手機鍵盤類型，數字欄位建議傳 numeric
`borderless`	Boolean	false
`transparent`	Boolean	false
`ctrlKFocus`	Boolean	false	支援 Cmd/Ctrl + K 聚焦
`noHidePasswordIcon`	Boolean	false	password 類型時不顯示切換明碼的眼睛

* 為必填

CommonFormTextArea

components/Common/Form/TextArea.vue

傳 maxlength 時會自動顯示字數計數。

含字數上限

* 為必填

事件	Payload	說明
`update:modelValue`	String
`onBlur`	—