Context object


FormKit inputs use a reactive object to expose data to template slots, rules, and the schema that defines each input. This is called the context object and is found in the each input's core node object at node.context. The context object has the following properties:


FormKit inputs have two values — the committed value (node.value) and the uncommitted value (node._value). At rest, these two values are equivalent, but the uncommitted value is the undebounced raw value of the input.


An object containing any attributes that will be passed to the internal input element.


A small object of utility functions that are useful when writing schemas.


A small object of common input handlers for use in the schema. Keep in mind that input "features" can replace or add to handlers on an input by input basis.


The help text of the input provided by the help prop.


The unique identifier of the input. This value is auto-generated unless the id prop is set.


The label of the input provided by the label prop.


An object of visible messages (where the type is not ui — ui). The key of this object is the message name, and the value is a core message object. For example, for an input displaying a single failing validation message, this object would look like:


The underlying core node of the current input. This object is not reactive (within the context of Vue).


For inputs that accept an options prop, this is a normalized array of option objects.


For inputs that accept an options prop, this object is available to section keys that are inside the iteration (i.e., the label section key on a checkbox input with multiple checkboxes). The object contains a label, value, and sometimes attrs:


Current state of the input:


The type of the input provided by the type prop. This is the value that should be referenced when looking up definitions in a library of inputs. Examples of this value: text, select, or autocomplete.


An object of visible messages (keyed by the key) of type ui that can be used in the interface. This allows for localized text for use on interface elements.


A Proxy object for requesting classes. This object allows schema authors to request any section and get a generative class name. For example $classes.input would (by default without additional configuration) return formkit-input while $classes.foobar would return formkit-foobar.