Wraps a form control with a label, an optional hint and an error message, and marks the field optional when asked. Place any input in its default slot.
Ejemplos
With hint
A labelled input with helper text.
We never share it.
<UiFormField label="Email" hint="We never share it." class="max-w-sm">
<UiInput v-model="state.email" type="email" placeholder="you@example.com" />
</UiFormField>With error
An error message replaces the hint.
That name is taken.
<UiFormField label="Username" error="That name is taken." class="max-w-sm">
<UiInput v-model="state.user" placeholder="Pick a username" />
</UiFormField>Optional marker
optional appends an “(optional)” note to the label.
Shown instead of your full name.
<UiFormField label="Nickname" optional hint="Shown instead of your full name." class="max-w-sm">
<UiInput v-model="state.nick" placeholder="Optional" />
</UiFormField>Inline, for toggle rows
inline drops the label’s bottom margin, suiting a label beside a control.
<UiFormField label="Enable ligatures" inline class="flex max-w-sm items-center justify-between gap-4">
<UiToggle v-model="state.lig" />
</UiFormField>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| label | string | '' | Field label. |
| optional | boolean | false | Show an "optional" marker. |
| hint | string | '' | Helper text below the control. |
| error | string | '' | Error message; replaces the hint when set. |
| inline | boolean | false | Lay the label beside the control. |
Slots
| Slot | Descripción |
|---|---|
default | The form control (UiInput, UiSelect, UiToggle, …). |