useField

v0.0.14testeddemo

Bind a single field by path. When rendered under a useForm(or given an explicit form), it reads/writes that form's state; otherwise it runs standalone with its own value, errors, and validation. Returns a writable value, reactive errors/meta, blur/change handlers, and attrs to spread.

Source Tests

Examples

// Within a useForm() component
const { value, errorMessage, attrs } = useField('email', {
  validate: (v) => v.includes('@') || 'Invalid email',
});
// <input v-model="value" v-bind="attrs">

// Standalone (no form ancestor)
const { value, errors } = useField('search', { initialValue: '', schema });

Demo

Loading demo…

Signature

export function useField<T = unknown>(
  path: MaybeRefOrGetter<string>,
  options: UseFieldOptions<T> ={ ... }

Type Parameters

T= unknown

Parameters

Parameter	Type	Default	Description
`path`	`MaybeRefOrGetter<string>`	—	The dotted field path (reactive allowed)
`options`?	`UseFieldOptions<T>`	`{}`	Validators, schema, trigger, explicit form, or standalone `initialValue`

Returns

UseFieldReturn<T>The field's reactive value, errors, meta, and handlers

Property	Type	Default	Description
`value`	`Ref<T>`	—	The field's writable value (bound to the form path, or local in standalone).
`errors`	`ComputedRef<string[]>`	—	The field's error messages.
`errorMessage`	`ComputedRef<string \| undefined>`	—	The field's first error message, if any.
`meta`	`FieldMeta`	—	Grouped reactive meta for the field.
`handleBlur`	`(event?: Event) => void`	—	Blur handler — marks touched and (re)validates per trigger.
`handleChange`	`(value: T, shouldValidate?: boolean) => void`	—	Set the value and optionally validate.
`handleInput`	`(event: Event) => void`	—	`input`/`change` DOM handler for native elements.
`setValue`	`(value: T) => void`	—	Set the field value programmatically.
`setTouched`	`(touched?: boolean) => void`	—	Mark the field touched/untouched.
`setErrors`	`(message: string \| string[] \| null) => void`	—	Set or clear (with `null`) the field's errors.
`validate`	`() => Promise<FieldValidationResultDetail>`	—	Validate just this field.
`reset`	`() => void`	—	Reset the field to its initial value.
`attrs`	`ComputedRef<FieldBindingProps>`	—	Props to spread on the field element (`v-bind="attrs"`).