DOCSEARCHbyAlgolia
Submit Docs

FormKit Documentation

website·Indexed 35 days ago

https://formkit.com

A framework for building forms with a comprehensive set of inputs, including native HTML wrappers, renderless inputs like Group and Meta, and Pro components such as Autocomplete, Slider, and Taglist. Features include a JSON-serializable schema for DOM storage, a reactive context object, and a variety of plugins for multi-step forms, auto-animation, and local storage integration.

Tokens
66.9K
Snippets
414
Records
542
Agent score
71%

What's inside FormKit

  1. Overview of FormKit's form primitive

    FormKit provides a single-component API (the FormKit Node) that handles validation, submission, and composition. It is designed to be predictable for both human developers and AI coding agents, eliminating the need for manual data bindings, prop-drilling, or complex state management. Key features include co-located validation, self-structuring data, and schema overrides.

  2. Overview of the FormKit framework

    FormKit is a comprehensive form-building framework for Vue developers designed to accelerate the creation of production-ready forms. Unlike simple UI libraries, it manages the entire form lifecycle, including input composition, validation, and submission/error handling. Key architectural advantages include:

    • Automatic Architecture: FormKit self-assembles the form's data tree in the background, eliminating the need for prop-drilling or manual event emitting, even with deeply nested data structures.
    • Unified Component: Instead of multiple different components for different input types, FormKit uses a single <FormKit> component for all inputs.
    • Opinionated Accessibility: It outputs an accessible DOM structure by default, ensuring forms meet accessibility standards without requiring manual markup from the developer.
    • Integrated Validation: Validation rules are baked directly into the inputs to provide instant user feedback.
    • Schema Support: Forms can be stored and generated using a JSON-serializable schema format, supporting conditional logic, loops, and data scoping.

  3. Overview of built-in FormKit validation rules

    FormKit provides over 30 production-ready validation rules to handle common front-end validation needs. These include checks for data types (alpha, alphanumeric, number), string constraints (length, starts_with, ends_with), date ranges (date_after, date_before, date_between), and specific formats (email, url). If a built-in rule does not meet a specific requirement, custom rules can be added.

    Available rules include:

    • accepted, alpha, alphanumeric, alpha_spaces, between, confirm, contains_alpha, contains_alphanumeric, contains_alpha_spaces, contains_lowercase, contains_numeric, contains_symbol, contains_uppercase, date_after, date_before, date_between, date_format, email, ends_with, is, length, lowercase, matches, max, min, not, number, required, require_one, starts_with, symbol, uppercase, url

  4. Overview of FormKit Core Architecture

    FormKit is powered by @formkit/core, a zero-dependency package that handles low-level functions including configuration, value input/output, event bubbling, plugin management, tree state tracking, message management, and lifecycle hooks. Instead of a centralized instance, FormKit uses a distributed set of FormKitNode instances. Each node represents a single input and contains its own options, configuration, props, events, plugins, and lifecycle hooks, decoupling the core logic from the rendering framework (e.g., Vue or React).

  5. Overview of FormKit Pro inputs

    FormKit Pro provides 14 advanced input types that use the same FormKit API surface as core inputs. These inputs are authored in FormKit schema, ensuring keyboard support, validation integration, and cross-framework compatibility. Available Pro inputs include:

    • Autocomplete: Type-ahead search with async data loading.
    • Colorpicker: HEX, RGB, and HSL support.
    • Currency: Auto-formatting with locale support.
    • Datepicker: Calendar picker with range selection and localization.
    • Dropdown: Searchable dropdown with custom option rendering.
    • Mask: Dynamic masking for phones, dates, and custom patterns.
    • Rating: Customizable rating input with half-star support.
    • Repeater: Dynamic lists of inputs with drag-and-drop reordering.
    • Slider: Range slider with customizable steps and marks.
    • Taglist: Tag-based input for categories and multi-select.
    • Toggle: Toggle switch alternative to checkboxes.
    • Toggle Buttons: Segmented control for selecting options.
    • Transfer List: Dual-list interface for selecting multiple items.
    • Unit: Combined number input and unit dropdown.

  6. Understand FormKit Core Nodes

    Every <FormKit> component is powered by a 'core node' which handles its functionality. Nodes are organized in a tree hierarchy where groups and lists can have children (e.g., a form group containing multiple input nodes). There are three types of core nodes: input, group, and list.

  7. Understand the FormKit Context object

    The context object is a reactive data store for each FormKit input, found at node.context within the input's core node object. It is used to expose data to template slots, validation rules, and schemas. Most props passed to the <FormKit> component are automatically mirrored in the context object, and it serves as the slot data passed to all section slots.

  8. Use the UnitPro input for restricted unit values

    The unit input (part of FormKit Pro) allows for restricted input of values based on a specific unit of measurement (such as distance, weight, temperature, etc.) and a specified locale.
    <FormKit 
  type="unit" 
  unit="kilometer" 
  name="distance" 
  label="Distance in meters" 
  defaultValue={100}
/>

  9. Understand the FormKit configuration hierarchy

    FormKit uses a fallback system to resolve node.props. If a property is not explicitly set via direct assignment, component props, global options, or provider options, FormKit checks the node.config object. If not found there, it recursively checks the parent's node.config, then the grandparent's, and so on up the tree until a value is found.

  10. Structure form data as an array using the List input

    The list input is a renderless input that does not produce DOM output. It is used exclusively to structure data from its child inputs as a JavaScript array. Each item in the resulting array corresponds to the value of the input at that specific index. Child inputs within a list do not need to be of the same type. Lists can also be used to determine validation states, provide initial values, and supply plugins or configuration to all children.
    <FormKit modelValue={list} onUpdateModelValue={setList} type="list">
  <p className="text-base mb-4">Please provide a list of emails.</p>
  <FormKit label="Email address" validation="required|email" />
  <FormKit label="Email address" validation="required|email" />
  <FormKit label="Email address" validation="required|email" />
</FormKit>

  11. Use the FormKit input component

    FormKit uses a single <FormKit /> component for all input types. The specific input behavior (e.g., text, textarea, checkbox) is determined by the type prop. This replaces the need to learn multiple different input components.
    <FormKit type="text" />
<FormKit type="textarea" />

  12. Implement a Select input in FormKit

    The FormKit select input wraps the native HTML <select> element. It supports single-value selections by default and multi-value selections by adding the multiple attribute. Options can be provided via the options prop in four formats: an array of strings, a value/label object, an array of objects, or by using <option> tags inside the default slot.