Form

gk-form and gk-form-item lay out labels, required marks, and validation messages around Input, Select, InputNumber, Rate, Cascader, Upload, TreeSelect, and Transfer. They do not replace those controls.

Labels default to the left, 7.5rem wide in the demo, aligned right. The component does not switch layout at a breakpoint. Bind label-placement="top" below about 640px.

Demos

Order

The email starts invalid so the error is visible. Submit runs validate() and emits submit with { model } only when every item passes. Validators are synchronous.

台北市新北市件最多 200 字送出重設

<gk-form :model="model" :rules="rules" label-width="7.5rem" @submit="onSubmit">
  <gk-form-item label="姓名" path="name" required help="與證件相同">
    <gk-input :value="model.name" @input="onName"></gk-input>
  </gk-form-item>
</gk-form>

Labels on top

<gk-form label-placement="top" label-width="auto">
  <gk-form-item label="顯示名稱" path="title">
    <gk-input></gk-input>
  </gk-form-item>
</gk-form>

Feedback off, warning, disabled

<gk-form-item .showFeedback="false">

Narrow screens

<gk-form :label-placement="narrow ? 'top' : 'left'" label-width="7.5rem">

Keep that binding in the app. Inline forms are for wide screens only.

API

gk-form

Name	Type	Default
model	object	{}
rules	Record<path, Rule | Rule[]>	{}
size	sm | md | lg	md
label-placement	left | top	left
label-width	string	auto
label-align	left | right	right when placement is left
inline	boolean	false
disabled	boolean	false
show-label / show-require-mark / show-feedback	boolean	true

validate() returns Promise<{ valid, errors: { path, message }[] }>. restoreValidation() clears item errors. submit fires with { model } only when valid. Reset keeps the same model object.

A rule is { required?, message?, pattern?, min?, max?, validator? }. validator must be synchronous. A Promise becomes the message「尚不支援非同步驗證」.

gk-form-item

Name	Type	Default	Notes
label / path	string	—
required	boolean	false	Shows the mark even without a required rule
rule	Rule | Rule[]	—	Overrides the form rule for that path
feedback	string	—	Wins over the failed rule text
validation-status	success | warning | error	—	Drives child status when the child has one
help	string	—	Shown when there is no error
show-label / show-feedback / show-require-mark	boolean	inherit	Use a property binding for false

Parts: row, label, mark, control, help, feedback, extra.

The required asterisk is real text with aria-hidden="true". The control gets aria-required. Errors set aria-invalid and aria-describedby. When show-label is false, give the control its own accessible name.

gk-rate has no status border; the feedback text is the error cue. Known status children are Input, Select, InputNumber, Cascader, Date Picker, and TreeSelect. Upload and Transfer use the feedback text the same way Rate does.