表單元件 測試頁面
FormInput
基本
姓名
電子信箱*
手機號碼*
身分證字號
狀態
已填寫
錯誤狀態*
此欄位為必填
已停用
<FormInput
v-model="value"
name="fieldName"
label="標籤文字"
type="text"
placeholder=""
:required="true"
:maxlength="10"
:disabled="false"
error-message=""
@blur="handler"
/>FormDropdown
基本
縣市
性別*
狀態
已選擇
錯誤狀態*
請選擇縣市
已停用
<FormDropdown
v-model="value"
name="fieldName"
label="標籤文字"
placeholder="請選擇"
:options="options"
:required="true"
:disabled="false"
error-message=""
@blur="handler"
/>
import type { DropdownOption } from '~/components/form/Dropdown.vue'
// { label: string; value: string }FormRadio
水平排列（inline）
捐款收據
(3擇1)性別
垂直排列
選項
狀態
錯誤狀態
請選擇一項
已停用
<FormRadio
v-model="value"
name="fieldName"
label="群組標題"
note="(備註)"
:options="options"
:inline="true"
:disabled="false"
error-message=""
/>
import type { RadioOption } from '~/components/form/Radio.vue'
// { label: string; value: string }FormCheckbox
基本
狀態
請勾選此項目
<!-- 純文字 label -->
<FormCheckbox
v-model="value"
name="fieldName"
label="純文字標籤"
:disabled="false"
error-message=""
/>
<!-- 含 HTML 的說明文字（slot） -->
<FormCheckbox v-model="value" name="fieldName">
我同意<a href="/terms">服務條款</a>
</FormCheckbox>FormTextarea
基本
0/150
0/300
狀態
0/150
內容不可超過字數限制
9/150
<FormTextarea
v-model="value"
name="fieldName"
placeholder="備註"
:maxlength="150"
:rows="3"
:disabled="false"
error-message=""
@blur="handler"
/>FormSection
姓名
電子信箱*
<FormSection
title="區塊標題"
:default-expanded="true"
>
<!-- slot: 放置任何表單欄位 -->
<FormInput ... />
</FormSection>