表單選擇

單選、多選、開關與下拉。一整組選項優先用 CheckRadioGroup，不要自己 v-for 一個個 CheckRadio。

單一選項

CommonFormCheckRadio

components/Common/Form/CheckRadio.vue

一個元件就是一個選項（含自己的 label）。要橫排還是直排，在外層自己排版。

modelValue 綁陣列時是多選、綁單一值時是單選；optionType 決定 inputValue 要轉成什麼型別再存進去。

單選 radio

男性女性

多選 checkbox（modelValue 綁陣列）

早上下午晚上

開關 switch

訂閱電子報

名稱	型別	預設值	說明
`name`*	String	—
`inputValue`*	String \| Number \| Boolean	—	這個選項代表的值
`modelValue`	Array \| String \| Number \| Boolean	null	checkbox 綁陣列可多選；綁布林則是單一開關
`type`	'checkbox' \| 'radio' \| 'switch'	'checkbox'
`optionType`	'string' \| 'number' \| 'boolean' \| 'array'	'string'	決定 inputValue 要轉成什麼型別再存進 modelValue
`label`	String	null
`isTerm`	Boolean	false	條款樣式
`disabled`	Boolean	false

* 為必填

事件	Payload	說明
`update:modelValue`	Array \| String \| Number \| Boolean
`onChange`	—

CommonFormCheckRadioGroup

components/Common/Form/CheckRadioGroup.vue

傳一個 options 陣列就畫出一整組，並統一處理錯誤訊息與排列方向。有現成選項清單時用這個，不要自己 v-for。

* 為必填

事件	Payload	說明
`update:modelValue`	Array \| String \| Number
`on-change`	—

CommonFormControl

components/Common/Form/Control.vue

兩種都由 CommonFormControl 提供，差在 type：

select —— 客製化選單，用 floating-ui 偵測空間不足時自動往上開，樣式完全可控。

ogSelect —— 原生 <select> 改外觀，行動裝置會叫出系統選單，長清單體驗較好。

兩種下拉

客製化 select

原生 ogSelect