Forms & Inputs

Field

Wraps a form control with a label, help text, and error message, wired together for you.

Install

import { Field } from 'vael-ui'

label

description

error

required

disabled

labelPlacement

import { Field } from 'vael-ui'

<Field label="" description="" error="" :required="false" :disabled="false" labelPlacement="top">Field</Field>

Name	Type	Default	Description
`label`	`string \| undefined`
`description`	`string \| undefined`
`error`	`string \| undefined`		Error message; renders with `role="alert"`.
`required`	`boolean \| undefined`
`disabled`	`boolean \| undefined`
`labelPlacement`	`"top" \| "float" \| "inset"`	`"top"`	`'top'` stacks above the control; `'float'` overlays on the edge (animates up on focus/fill); `'inset'` overlays inside the control.
`ui`	`Partial<{ root: UiPartValue; label: UiPartValue; control: UiPartValue; description: UiPartValue; error: UiPartValue; }> \| undefined`

Name	Type	Description
`default`	`any`
`label`	`any`	Replaces label text without affecting label element or for wiring.
`description`	`any`
`error`	`{ error: string; }`

No events.

Name	Type	Description
`el`	`HTMLElement \| null`