ENGINEERING UI CATALOG
表單
輸入與勾選元件的常用狀態，包括必填、選填、唯讀及停用。
UIFormGroup表單欄位容器
只負責標題、星號、警告、外框 class 與前後 slots，不綁定特定欄位元件。
一般容器
Default slot 內容
選填容器 （選填）
可使用 slot-label
警告容器
warning 與 warningText
此欄位內容有誤
slot-before
自訂標題內容
Default slot 內容
slot-after
查看使用方式
<UIFormGroup label="欄位標題" star warning-text="錯誤訊息">\n 欄位內容\n</UIFormGroup>UIFormInput輸入框
獨立負責 v-model 與原生輸入狀態，可單獨使用 warning 變成紅色。
Default
Warning
Readonly
Disabled
查看使用方式
<UIFormInput v-model="name" placeholder="請輸入姓名" warning />UIFormPassword密碼欄位
具備顯示／隱藏密碼按鈕，支援 required、disabled、readonly 與 autocomplete。
密碼
密碼錯誤
停用密碼欄位
查看使用方式
<UIFormGroup label="密碼" star>\n <UIFormPassword v-model="password" required />\n</UIFormGroup>UIFormTextarea多行輸入
支援 rows、maxlength、resize，以及 default、warning、disabled 狀態。
Default
Warning
Disabled
查看使用方式
<UIFormTextarea v-model="note" :rows="4" warning />UIFormSelect下拉選單
透過 options 物件陣列建立選項，支援一般、warning、disabled 狀態。
Default
Warning
Disabled
查看使用方式
<UIFormSelect v-model="location" :options="locationOptions" warning />UIFormRadio + UIFormRadioGroup單選選項
可手動組合單一 Radio，或用 options 產生 RadioGroup；純符號模式必須提供 aria-label。
手動組合
Options 群組
純 Radio 符號
查看使用方式
<UIFormRadio v-model="method" name="contact" value="email" label="Email" />\n<UIFormRadio v-model="enabled" name="enabled" value="yes" aria-label="啟用" />\n<UIFormRadioGroup v-model="method" :options="contactOptions" />UIFormCheckbox多選選項
可獨立組合多個核取項目；不需要文字時省略 label／slot，並提供 aria-label。
純 Checkbox 符號
查看使用方式
<UIFormCheckbox v-model="agreed" label="我同意服務條款" />\n<UIFormCheckbox v-model="enabled" aria-label="啟用通知" />UIFormButton輸入框旁按鈕
固定為 44px 高，展示 primary、secondary、outline、warning 與 disabled 狀態。
預約代碼
查看使用方式
<UIFormButton variant="outline">外框按鈕</UIFormButton>\n<UIFormButton warning>警告操作</UIFormButton>UIFormDate + UIFormTime + UIFormNumber + UIFormRange日期、時間、數值與拉桿
分別封裝原生 date、time、number 與 range，保留瀏覽器輸入能力並統一樣式。
預約日期
預約時間
預約人數
造型調整幅度
查看使用方式
<UIFormDate v-model="date" min="2026-08-01" />\n<UIFormRange v-model="value" :min="0" :max="100" value-suffix="%" />