Form field

Wraps a control with its label, helper text and error, so every field reads the same.

Refined portWildFormField.vueForms/FormFieldWFormRow

Try it

Turn each piece on and off, and swap the control underneath.

Threshold

Alerts fire when a reading crosses this.

Control

Required

Hint

Help

Error

<WildFormField
  label="Threshold"
  help="Alerts fire when a reading crosses this."
>
  <WildTextInput v-model="threshold" />
</WildFormField>

When to use

Use a form field around every input, select and toggle in a form, so each one gets a label and room for help and an error.
Use hint for a word or two on the label row, such as Optional.

Don’t use it

For a single checkbox. Use the Checkbox’s own label.

Anatomy

A label and optional hint, the control, then help text or an error.

Site name*

Bore 12 — north paddock

ThresholdOptional

Alerts fire when a reading crosses this.

<WildFormField label="Threshold" hint="Optional"
  help="Alerts fire when a reading crosses this.">
  <WildTextInput v-model="threshold" />
</WildFormField>

The label is 12px and the help 11px, both smaller than the 14px value, so the data outranks its scaffolding.

States

The error takes the help text’s place, so a field with help keeps its height when validation fires.

Threshold

Alerts fire when a reading crosses this.

Threshold

420

Must be between 0 and 100.

A field with no help text grows by one line when an error appears.

Controls

Site name

Bore 12

Region

North paddock

SMS alertsImmediate

Input, select and toggle take the same label, hint, help and error, so a settings column that mixes all three reads as one.

Content

Name the setting in the label, as a noun: Threshold, Region, SMS alerts.
Say what the setting does in the help: “Alerts fire when a reading crosses this.”
Say how to fix it in the error: “Must be between 0 and 100.”

Props

Prop	Type	Default	Description
label	string	—	The field’s name. A placeholder isn’t a label.
hint	string	—	A short note right of the label.
help	string	—	Guidance under the control.
error	string	—	Replaces the help while it’s set.
required	boolean	false	A red asterisk after the label.

Tokens

Token	Value	Where it lands
--font-size-sm	12px	Label.
--font-size-xs	11px	Hint, help and error.
--font-weight-medium	475	Label.
--color-grey-900	#4F4D55	Label, hint and help ink.
--color-error	#E12121	Required asterisk and error text.
(no token)	4px	Gap between label, control and message.