FormField

Label, required marker and hint/error wrapper around any control. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

import { UiFormField } from '@ziyarago/ui/vue'

Required with hint

Passport number *As printed on the data page

Vue

<UiFormField
  label="Passport number"
  required
  hint="As printed on the data page"
>
  <UiTextField placeholder="A12345678" />
</UiFormField>

Error

Nationality *This field is required

Vue

<UiFormField label="Nationality" required error="This field is required">
  <UiTextField placeholder="Select nationality" />
</UiFormField>

Sizes

Passport number *As printed on the data page

Vue

<UiFormField
  size="xs"
  label="Passport number"
  required
  hint="As printed on the data page"
>
  <UiTextField placeholder="A12345678" />
</UiFormField>

<UiFormField
  size="sm"
  label="Passport number"
  required
  hint="As printed on the data page"
>
  <UiTextField placeholder="A12345678" />
</UiFormField>

<UiFormField
  size="md"
  label="Passport number"
  required
  hint="As printed on the data page"
>
  <UiTextField placeholder="A12345678" />
</UiFormField>

<UiFormField
  size="lg"
  label="Passport number"
  required
  hint="As printed on the data page"
>
  <UiTextField placeholder="A12345678" />
</UiFormField>

<UiFormField
  size="xl"
  label="Passport number"
  required
  hint="As printed on the data page"
>
  <UiTextField placeholder="A12345678" />
</UiFormField>

API reference

Label, required marker, hint and error wrapper around any control. Use to build a field from custom inputs.

Props

PropType and valuesDefaultDescription

labelstring—Label shown above the control.

requiredbooleanfalseAppends a red asterisk to the label. Does not validate.

hintstring—Helper text under the control. Hidden while error is set.

errorstring—Error message under the control. Turns the control red and is announced with role="alert".

sizexssmmdlgxl'md'Only marks the wrapper with data-size; sizes never leak into children by design, so set size on the inner control too.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultThe control(s) to wrap.

Notes

Does not link label and control by id: put the control inside a label or pass an aria-label yourself.