VfHidden

Basic

By default VfHidden renders an <input type="hidden"> element in the DOM. It submits a value with the form without any visible UI.

<VfHidden
  name="token"
  default="abc-123"
/>

<template>
  <VfHidden
    name="token"
    default="abc-123"
  />
</template>

<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  token: {
    type: 'hidden',
    default: 'abc-123',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>

Meta

When the meta prop is enabled the element renders nothing to the DOM — not even a hidden input. Its value still participates in the form data, making it useful for storing metadata that doesn't need a corresponding HTML element.

<VfHidden
  name="source"
  default="landing-page"
  meta
/>

<template>
  <VfHidden
    name="source"
    default="landing-page"
    meta
  />
</template>

<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  source: {
    type: 'hidden',
    default: 'landing-page',
    meta: true,
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>

Props

Configure the component's behavior and appearance with these props.

General

Prop	Default	Description
name	—	Required. The element's unique identifier and path in the current level of form data model.
type	'hidden'	The element type identifier.
id	—	The HTML id attribute for the input element.

Input

Prop	Default	Description
meta	false	When true the element stores metadata only and renders nothing to the DOM — not even a hidden input.
noExpressions	false	Disables expression resolution for this element. Applies to the element itself only (container elements don't cascade it to their children), and a form-level noExpressions cannot be overridden by setting it to false here.
sensitive	false	Whether the element holds sensitive data (passwords, payment details, …). Sensitive values are excluded from locally stored drafts. On a container, the whole subtree is excluded.

Data

Prop	Default	Description
modelValue	—	The current value of the element (v-model).
default	—	The default/initial value of the element. Being expressionable, a {...} expression string is accepted alongside the model type.
submit	true	Whether the element value is included in form submission data.
detached	false	Whether the element is detached from the form's element registry and data model (if applicable).
transformPayload	—	Transforms the element's value when submitting the form.

Validation

Prop	Default	Description
rules	—	Validation rules to apply to the element.
validateOn	—	Controls when validation is triggered (e.g. on change, blur, or submit).
debounce	—	Delay in milliseconds before processing input.
bail	true	Whether to stop validation after the first failing rule.
ruleMessages	—	Custom error messages keyed by validation rule name.
displayName	—	The display name used in validation error messages.
maxErrors	1	Maximum number of validation errors to display at once.
hoist	false	Whether to push the element's errors to its nearest ancestor element.

Conditions

Prop	Default	Description
conditions	—	Conditions that control the element's visibility and availability.
conditionsTrigger	—	The source that triggers re-evaluation of this element's async conditional props (conditions, disabled, readonly, and validation rule conditions). Accepts an array of element paths whose values are watched, a Ref, or a function used as a watch getter. When omitted, any change in the form model re-triggers evaluation.
conditionsDebounce	—	The debounce delay in milliseconds applied before re-evaluating this element's async conditional props when the trigger source changes. Overrides the global $conditions.debounce config (default 300).

Customization

Prop	Default	Description
parts	—	Custom DOM attribute overrides for the component's structural parts.
class	—	CSS classes to apply to the component's root element.
classes	—	Custom CSS class overrides for the component's structural parts.
reclass	—	CSS class overrides that replace (rather than merge with) default classes.
slots	—	Custom Vue components to use for named slots. Every component resolves it through the standard outlets pipeline (see useOutlets).
presets	—	Named configuration presets to apply to the component.
template	—	A custom Vue component to use as the template instead of the default.
component	—	A custom Vue component to render in the component's default slot.

Context

Reactive properties and methods accessible on the component's Context object.

General

Name	Description
type	The element's type identifier (e.g. "text", "checkbox", "select").
name	The element's name as a string ref.
props	The resolved component props with defaults applied.

Hidden

Name	Description
validation	Per-language validation views keyed by language (default for non-translatable elements).
validator	The validator instance the element is registered with: the form's validator, a store-attached one, or a newly created one.
shouldValidate	Whether the element should validate live on user input, per the validateOn policy and the form's state.
onUserInput()	Validates the element on user input when the live-validation policy allows it.
isFlatContainer	Whether the element's data is flattened into the parent container rather than nested under its own name key.
containerModel	The model ref the element provides to its children via the container context: the parent's model for flat containers, the element's own model otherwise.
handleModelUpdate()	Handles a native input event and updates the model from the event target.
initValidation()	Registers the element with the validator and compiles its rules.
destroyValidation()	Unregisters the element from the validator and clears its validation views.
rootModel	The root model backing the form when this element operates as the form root, undefined for every other element.
sensitivePaths	Data paths holding sensitive data (sensitive: true) within this element's subtree — excluded from locally stored drafts.
inputValue	The value to bind to the native hidden input's value attribute. Resolves to undefined when the model is not a string or number so that complex values are not coerced to [object Object].

Data

Name	Description
model	The element's reactive model value within the form data tree.
value	The current language-aware value of the element. For translatable elements, returns the value for the active language.
payload	The element's submission payload. Container elements aggregate from children; leaf elements return their own value.
nullValue	The value the element holds when it is considered empty. For translatable elements a per-language object is returned.
initialModel	A snapshot of the model at initialization time, used for dirty checking and reset.
dataPath	The dot-notation path to this element's value within the form data object (e.g. "address.city"). Empty string for the root model. Flat containers inherit their parent's data path.
tracking	Whether the element's default expression is currently tracked and auto-updating the value.
update()	Updates the element's model value. Container elements perform a deep merge; leaf elements set the value directly.
load()	Loads data into the element and fires the load event, cascading to all children.
reset()	Resets the element to its initial model state and fires the reset event.
clear()	Clears the element to its null value and fires the clear event.
track()	Resumes expression tracking after an untrack, immediately re-writing the resolved value.
untrack()	Stops expression tracking, leaving the current value in place.
reinit()	Reinitializes the element by rebuilding both its model registration and validation instances.

State

Name	Description
visible	Whether the element is currently visible, based on availability, container visibility, and pager state.
available	Whether the element is available (not hidden by conditional logic).
dirty	Whether the current model value differs from the initial model value.
empty	Whether the element's current value is empty. Container elements check whether all children are empty.
busy	Whether the element is busy, meaning it is either debouncing or has pending async validation.
hoisted	Whether this element pushes its errors to its nearest ancestor element instead of displaying and reporting them itself.

Validation

Name	Description
invalid	Whether any of the element's validations (across all languages) are currently invalid, including children.
validated	Whether all of the element's validations (across all languages) have been executed, including children.
completed	Whether the element is completed, meaning it either has no rules or has been validated without errors.
success	Whether the element has been validated and passed (always true for elements without own rules), once touched.
pending	Whether any of the element's validations are currently pending an async check, including children.
debouncing	Whether any of the element's validations are currently debouncing, including children.
errors	All error messages for this element: its own plus any pushed up by hoisted children.
hasError	Whether the element has any active error messages.
displayErrors	The error messages rendered for this element. Empty when the element pushes its errors to its parent; otherwise errors capped by maxErrors.
ownErrors	The element's own error messages (validation rules plus custom message bag entries).
formErrors	Error messages propagated to the form, keyed by element path. Empty when the element pushes its errors to its parent.
messages	The list of custom messages from the message bag, including messages from hoisted children.
messageBag	The element's message bag for custom errors and messages.
required	Whether the element is required by its current validation rules.
genericName	A human-readable name resolved from displayName, label, floating, placeholder, or the element's name prop.
validate()	Runs validation on the element's own rules and all children, returning whether everything is valid.
validateSelf()	Validates the element's own rules (without children), resolving with the result.
validateChildren()	Validates stateful children, returning whether all are valid. By default only incomplete children run.
invalidate()	Marks all validation instances as invalidated, requiring revalidation.
unvalidate()	Resets all validation state, including children's.
filled()	Checks whether a value is considered filled.
clean()	Marks the element as clean by updating the initial model snapshot.
clearErrors()	Clears all error messages from the message bag.
clearMessages()	Clears all custom messages from the message bag.
clearMessageBag()	Clears the entire message bag, removing both errors and messages.

Layout

Name	Description
id	The resolved element id, using the id prop or falling back to the auto-generated uid.
classes	The resolved CSS class map for the component.
parts	The resolved DOM attribute overrides for internal elements.
viewLoaded	Whether the element's view has been loaded (used for lazy rendering optimization).
$el	Reference to the component's root DOM element.

Tree

Name	Description
form$	The parent form's context, providing access to form-level state and methods.
path	The element's dot-notation path in the form tree (e.g. "user.name").
componentName	The resolved Vue component name for this element.
container	The container context providing path, model, and registration methods for child elements.
children	The child element registry providing registration, unregistration, and reactive child lists.

Events

Name	Description
fire()	Fires an event synchronously, invoking before, main, and after listeners in order.
fireAsync()	Fires an event asynchronously, awaiting each callback and short-circuiting when any returns false.
on()	Subscribes a callback to a specific event.
off()	Removes a previously registered event callback.
onBefore()	Registers a callback that runs before the main event listeners.
onAfter()	Registers a callback that runs after the main event listeners.

Accessibility

Name	Description
uid	A unique auto-generated identifier for the element.

Events

Events emitted by the component. See Events for details.

Name	Params	Description
change	newValue, oldValue, context$	Emitted when the element value changes.
update:modelValue	value	Emitted to update the v-model binding.
load	value, context$	Emitted when the element's value is loaded programmatically via the load method.
reset	context$	Emitted when the element is reset to its default value.
clear	context$	Emitted when the element's value is cleared.
invalid	context$	Emitted when the element becomes invalid.
valid	context$	Emitted when the element becomes valid after having been invalid.
beforeMount	context$	Emitted before the component is mounted.
mounted	context$	Emitted after the component is mounted.
beforeUnmount	context$	Emitted before the component is unmounted.
unmounted	context$	Emitted after the component is unmounted.
updated	context$	Emitted after the component is updated.

Slots

Named Slots for replacing parts of the component's rendering.

Name	Scope	Description
template	context	Slot that replaces the entire component rendering. Receives the full component context as a single context prop.