FormKit inputs use a reactive object to expose data to slots, rules, and the underlying schema that defines the 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:
_value
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.
attrs
An object containing any attributes that will be passed to the internal input element.
fns
A small object of utility functions that are useful when writing schemas.
handlers
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.
help
The help text of the input provided by the help
prop.
id
The unique identifier of the input. This value is auto-generated unless the id
prop is set.
label
The label of the input provided by the label
prop.
messages
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:
node
The underlying core node of the current input. This object is not reactive (within the context of Vue).
options
For inputs that accept an options prop, this is a normalized array of option objects.
option
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
:
state
Current state of the input:
type
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
.
ui
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.
classes
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
.