IFormField ​

The label, description, hint, help and error around a control. It generates an id, points the label at it, links the description and error with aria-describedby, and sets invalid on the control.

<IFormField label="Invoice reference" description="Shown to the client on the PDF.">
  <IInput v-model="reference" placeholder="INV-1042" />
</IFormField>

You do not pass an id — the field makes one and wires both ends.

Hint and help ​

hint sits at the end of the label row — for "Optional", a character count, a link to a definition. help sits under the control, for guidance that is not an error.

<IFormField
  label="VAT number"
  hint="Optional"
  help="Leave blank if the client is outside the EU."
>
  <IInput v-model="vat" placeholder="SI12345678" />
</IFormField>

Required ​

<IFormField label="Email" required>
  <IInput v-model="email" type="email" placeholder="billing@example.com" />
</IFormField>

Errors ​

Inside an IForm, name connects the field to a validation error and the message appears on its own. Set error by hand only outside a form.

<!-- Inside an IForm: the message comes from validation. -->
<IFormField name="email" label="Email">
  <IInput v-model="state.email" type="email" />
</IFormField>

<!-- Outside one: set it yourself. -->
<IFormField label="Email" error="Enter a valid email address.">
  <IInput v-model="email" type="email" />
</IFormField>

An error replaces the help text rather than stacking with it.

Any control ​

The wiring reaches every field in the library, including composed ones like IPasswordInput and multi-part ones like ISelect, whose attributes land on the trigger.

<IFormField label="Notes" description="Only you can see these.">
  <ITextarea v-model="notes" :autosize="{ min: 2, max: 5 }" />
</IFormField>

ICheckbox, ISwitch and IRadioGroup carry their own label. Inside a field, set the text on the field and leave the control's own label off, or it is announced twice.

Props ​

Slots ​