# FormKit Documentation

> FormKit is a powerful form-building framework for Vue.js that makes building high-quality, accessible forms faster and easier. It provides a single component API, validation, error handling, and a plugin system for extensibility.

FormKit works with Vue 3, Nuxt 3, and Astro. It includes 25+ production-ready inputs, schema-driven form generation, and first-class TypeScript support.

All documentation pages are available as LLM-optimized markdown via `.react.md` and `.vue.md` URL suffixes. The links below use the React export.

## Getting Started

- [Community & support](https://formkit.com/getting-started/community.react.md): Get involved in the FormKit community — troubleshooting support, feature requests, project roadmap discussion, and more.
- [Installation](https://formkit.com/getting-started/installation.react.md): Get up and running with FormKit in your project.
- [What is FormKit?](https://formkit.com/getting-started/what-is-formkit.react.md): FormKit is a form authoring framework for Vue developers that makes building high quality production-ready forms 10x faster.
- [Your first form](https://formkit.com/getting-started/your-first-form.react.md): Creating your first form and understanding FormKit.

## Essentials

- [Architecture](https://formkit.com/essentials/architecture.react.md): A zero-dependency package that is responsible for nearly all of FormKit's low-level critical functions.
- [Configuration](https://formkit.com/essentials/configuration.react.md): Learn to customize your forms to your precise needs.
- [Custom Inputs](https://formkit.com/essentials/custom-inputs.react.md): Create your own inputs that automatically inherit FormKit’s value-added features such as validation, error messages, data modeling, grouping, labels, help text and more.
- [Examples](https://formkit.com/essentials/examples.react.md): Examples you can use in your project today.
- [Forms](https://formkit.com/essentials/forms.react.md): Collect all of your FormKit data, submit to your server, and handle server-side error messages.
- [Icons](https://formkit.com/essentials/icons.react.md): Easily add icons to your inputs using the provided FormKit icons or supply your own
- [Inputs](https://formkit.com/essentials/inputs.react.md): FormKit ships with turbocharged inputs for developing production-ready forms in your project.
- [Internationalization (i18n)](https://formkit.com/essentials/internationalization.react.md): Translate FormKit UI and validation messages into supported languages — or provide your own.
- [FormKit Schema](https://formkit.com/essentials/schema.react.md): Harness all the power of FormKit in a serializable, JSON-compatible schema language.
- [Styling](https://formkit.com/essentials/styling.react.md): Add custom styling to your FormKit components - both globally and per-instance.
- [Validation](https://formkit.com/essentials/validation.react.md): Provide instant feedback to users on the validity of their form data.

## Inputs

- [Autocomplete Input](https://formkit.com/inputs/autocomplete.react.md): A Pro input that allows users to search and select from a customizable options list. Supports single and multi-value selections.
- [Barcode](https://formkit.com/inputs/barcode.react.md): Scan barcodes and QR codes
- [Button Input](https://formkit.com/inputs/button.react.md): A native HTML button element.
- [Checkbox Input](https://formkit.com/inputs/checkbox.react.md): A native HTML checkbox input with support for one or many nested options elements.
- [Color Input](https://formkit.com/inputs/color.react.md): A native HTML color picker.
- [Colorpicker Input](https://formkit.com/inputs/colorpicker.react.md): A colorpicker with support for alpha transparency, pre-loaded swatches, and multiple color output formats.
- [Currency Input](https://formkit.com/inputs/currency.react.md): The currency input is used to create locale/currency specific parsed content
- [Date Input](https://formkit.com/inputs/date.react.md): A native HTML date picker.
- [Datepicker Input](https://formkit.com/inputs/datepicker.react.md): A Pro input that allows users to select a date via pop up calendar or typing the date in using their preferred localization.
- [Datetime-local Input](https://formkit.com/inputs/datetime-local.react.md): A native HTML datetime-local picker.
- [Dropdown Input](https://formkit.com/inputs/dropdown.react.md): A Pro input that allows users to select from a customizable options list.
- [Email Input](https://formkit.com/inputs/email.react.md): A native HTML email input.
- [File Input](https://formkit.com/inputs/file.react.md): A native HTML file input with support for multiple files, drag and drop, clearing the input, and repopulating from an array.
- [Form](https://formkit.com/inputs/form.react.md): Collect all of your FormKit data, submit to your server, and handle server-side error messages.
- [Group Input](https://formkit.com/inputs/group.react.md): An invisible FormKit input that allows you to logically structure your form data as an object.
- [Hidden Input](https://formkit.com/inputs/hidden.react.md): A native HTML hidden input.
- [List Input](https://formkit.com/inputs/list.react.md): An invisible FormKit input that allows you to logically structure your form data as an array.
- [Mask Input](https://formkit.com/inputs/mask.react.md): An input that formats text to a given pattern as a user types.
- [Meta Input](https://formkit.com/inputs/meta.react.md): A hidden input that stores arbitrary data.
- [Month Input](https://formkit.com/inputs/month.react.md): A native HTML month picker.
- [Multi-step](https://formkit.com/inputs/multi-step.react.md): Easily add multi-step sections to your FormKit forms
- [Number Input](https://formkit.com/inputs/number.react.md): A native HTML number input
- [Password Input](https://formkit.com/inputs/password.react.md): A native HTML password input.
- [Radio Input](https://formkit.com/inputs/radio.react.md): A native HTML radio input with support for one or many nested options elements.
- [Range Input](https://formkit.com/inputs/range.react.md): A native HTML range input.
- [Rating Input](https://formkit.com/inputs/rating.react.md): A Pro input that allows users to provide feedback based on a numeric scale represented by icons/images.
- [Repeater Input](https://formkit.com/inputs/repeater.react.md): A Pro input that allows users to add, remove, and re-arrange repeatable input groups.
- [Search Input](https://formkit.com/inputs/search.react.md): A native HTML search input.
- [Select Input](https://formkit.com/inputs/select.react.md): A native HTML select input. Supports both single-value and multi-value selections.
- [Slider Input](https://formkit.com/inputs/slider.react.md): An advanced range input with support for multiple values.
- [Submit Input](https://formkit.com/inputs/submit.react.md): A native HTML button element used in place of a native HTML submit input.
- [Taglist Input](https://formkit.com/inputs/taglist.react.md): A Pro input that allows users to search and select from a customizable options list. Supports single and multi-value selections.
- [Tel (Telephone) Input](https://formkit.com/inputs/tel.react.md): A native HTML tel input.
- [Text Input](https://formkit.com/inputs/text.react.md): A native HTML text input.
- [Textarea Input](https://formkit.com/inputs/textarea.react.md): A native HTML textarea input.
- [Time Input](https://formkit.com/inputs/time.react.md): A native HTML time input.
- [Toggle Input](https://formkit.com/inputs/toggle.react.md): The toggle input is used to choose one of two values; it is a good choice when you want the user to make a binary choice such as turning a feature on or off.
- [Toggle Buttons](https://formkit.com/inputs/togglebuttons.react.md): The toggle buttons are used to choose between one or more choices with a button aesthetic.
- [Transfer List Input](https://formkit.com/inputs/transfer-list.react.md): The transfer list input allows users to transfer values between two lists. It is useful for situations where you need to select multiple values from a large list of options.
- [Unit Input](https://formkit.com/inputs/unit.react.md): The unit input allows for restricted input of values based on the provided unit (distance, weight, temperature, etc.) and locale.
- [URL Input](https://formkit.com/inputs/url.react.md): A native HTML url input.
- [Week Input](https://formkit.com/inputs/week.react.md): A native HTML week picker.

## Plugins

- [AutoAnimate](https://formkit.com/plugins/auto-animate.react.md): Add smoothing transitions to your FormKit inputs using AutoAnimate.
- [Auto-Height Textarea Plugin](https://formkit.com/plugins/auto-height-textarea.react.md): Automatically adjust the height of your textareas based on their content.
- [Barcode input](https://formkit.com/plugins/barcode.react.md): Scan barcodes and QR codes
- [Floating labels](https://formkit.com/plugins/floating-labels.react.md): easily add floating labels to your text and textarea inputs.
- [Inertia Plugin](https://formkit.com/plugins/inertia.react.md): A plugin for integrating FormKit with Laravel Inertia.
- [Save to LocalStorage](https://formkit.com/plugins/local-storage.react.md): Save unsubmitted user form input to localStorage to prevent data loss.
- [Multi-Step Input Plugin](https://formkit.com/plugins/multi-step.react.md): Easily add multi-step sections to your FormKit forms.
- [Zod Plugin](https://formkit.com/plugins/zod.react.md): Use your Zod schema to validate your FormKit forms.

## Guides

- [Create a custom input](https://formkit.com/guides/create-a-custom-input.react.md): Follow this guide to learn how to create, register, and use a custom FormKit input in your project.
- [Create a Tailwind CSS theme](https://formkit.com/guides/create-a-tailwind-theme.react.md): Follow this guide to learn how to leverage Tailwind CSS with your FormKit forms and inputs
- [Export and restructure inputs](https://formkit.com/guides/export-and-restructure-inputs.react.md): Follow this guide to learn how to create, register, and use a custom FormKit input in your project.
- [Optimizing for production](https://formkit.com/guides/optimizing-for-production.react.md): Follow this guide to learn how to slim down your FormKit installation for production.

## API Reference

- [The Context Object](https://formkit.com/api-reference/context.react.md): FormKit provides a reactive context object to expose data to slots, rules, and the underlying schema that defines an input.
- [formkit/addons](https://formkit.com/api-reference/formkit-addons.react.md)
- [formkit/common](https://formkit.com/api-reference/formkit-common.react.md)
- [formkit/core](https://formkit.com/api-reference/formkit-core.react.md)
- [formkit/i18n](https://formkit.com/api-reference/formkit-i18n.react.md)
- [formkit/inputs](https://formkit.com/api-reference/formkit-inputs.react.md)
- [formkit/observer](https://formkit.com/api-reference/formkit-observer.react.md)
- [formkit/schema](https://formkit.com/api-reference/formkit-schema.react.md)
- [formkit/themes](https://formkit.com/api-reference/formkit-themes.react.md)
- [formkit/utils](https://formkit.com/api-reference/formkit-utils.react.md)
- [formkit/validation](https://formkit.com/api-reference/formkit-validation.react.md)
- [formkit/vue](https://formkit.com/api-reference/formkit-vue.react.md)
- [formkit/zod](https://formkit.com/api-reference/formkit-zod.react.md)

## Optional

- [Changelog](https://formkit.com/changelog): Version history and release notes
- [FormKit Pro](https://formkit.com/pro): Premium inputs and features
- [Playground](https://formkit.com/playground): Interactive code editor