# unform/unform

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/unform-unform).**

4,410 stars · 466 forks · TypeScript · MIT · archived

## Links

- GitHub: https://github.com/unform/unform
- Homepage: https://unform-rocketseat.vercel.app/
- awesome-repositories: https://awesome-repositories.com/repository/unform-unform.md

## Topics

`form` `forms` `hacktoberfest` `react` `react-native`

## Description

Unform is a React form state manager designed to handle the state, validation, and submission of complex user input forms. It utilizes an uncontrolled form API that minimizes re-renders by using references instead of synchronized state to manage form data.

The library features a nested data mapper that organizes fields into hierarchical objects and arrays using scoping and dot notation. It also includes a custom input adapter to connect third-party UI components and non-standard inputs to the centralized form state, and a validation engine that checks submitted data against defined schemas to map error messages to specific fields.

Broad capabilities include centralized state management for data initialization and resetting, file upload handling, and user input masking. The system provides programmatic control over form submission and direct reference access to individual input elements.

## Tags

### User Interface & Experience

- [React Form Libraries](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-handling/react-form-libraries.md) — Provides a comprehensive system for managing state, validation, and submission of complex forms in React.
- [Nested Form Data Structures](https://awesome-repositories.com/f/user-interface-experience/complex-data-organization/nested-form-data-structures.md) — Organizes form inputs into nested objects and arrays to match complex backend data structures.
- [Schema-Based Form Validation](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-handling/react-form-libraries/schema-based-form-validation.md) — Checking user input against schemas and displaying real-time error messages without compromising application speed.
- [Nested Field Containers](https://awesome-repositories.com/f/user-interface-experience/forms/field-grouping-containers/nested-field-containers.md) — Creates hierarchical data structures within forms to map to backend relationships while maintaining UI reusability. ([source](https://unform-rocketseat.vercel.app/))
- [Custom Form Field Components](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers/custom-component-injection/custom-form-field-components.md) — Allows linking third-party components to form state by defining how to get, set, and clear their values. ([source](https://unform-rocketseat.vercel.app/guides/basic-form))
- [Custom Component Registration](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers/custom-component-injection/custom-form-field-components/custom-component-registration.md) — Provides a system for registering complex UI components into form state by defining methods to retrieve, set, and clear values. ([source](https://unform-rocketseat.vercel.app/examples/react-dropzone))
- [Third-Party Form Library Adapters](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-handling/react-form-libraries/third-party-form-library-adapters.md) — Provides a custom input adapter to connect third-party UI libraries and non-standard elements to the form state.
- [Form Data Binding](https://awesome-repositories.com/f/user-interface-experience/form-data-binding.md) — Enables binding non-standard form elements to form state via references and defined value updates. ([source](https://unform-rocketseat.vercel.app/examples/react-input-mask))
- [Form Field State Integrations](https://awesome-repositories.com/f/user-interface-experience/form-field-extensions/accessible-combobox-form-integrations/form-field-state-integrations.md) — Assigns error messages to specific fields or the global form state to provide user feedback. ([source](https://unform-rocketseat.vercel.app/guides/get-set-field-error))
- [Field Groups](https://awesome-repositories.com/f/user-interface-experience/form-field-extensions/field-groups.md) — Organizes related inputs into named logical groups to manage state and validation for complex structures. ([source](https://unform-rocketseat.vercel.app/api/scope))
- [Form Reset Handlers](https://awesome-repositories.com/f/user-interface-experience/form-input-handling/form-reset-handlers.md) — Allows clearing input values or specific fields automatically after submission or manually via a reference. ([source](https://unform-rocketseat.vercel.app/guides/reset-form))
- [Programmatic Form Control](https://awesome-repositories.com/f/user-interface-experience/form-input-handling/programmatic-form-control.md) — Allows programmatically updating field values and triggering submissions through direct references to form instances.
- [Programmatic Form Submissions](https://awesome-repositories.com/f/user-interface-experience/programmatic-form-submissions.md) — Provides a reference function to execute data collection and validation independently of native browser form events.
- [Arbitrary Component Bindings](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components/form-handling-components/state-orchestration-components/arbitrary-component-bindings.md) — Implements a mechanism to connect arbitrary UI components to form state by defining how to get, set, and clear values. ([source](https://unform-rocketseat.vercel.app/recipes/typescript))

### Web Development

- [Form State Management](https://awesome-repositories.com/f/web-development/form-state-management.md) — Provides a comprehensive system for tracking input values, validation status, and submission lifecycles in complex forms. ([source](https://unform-rocketseat.vercel.app/guides/basic-form))
- [Performant Form State Management](https://awesome-repositories.com/f/web-development/performant-form-state-management.md) — Implements a reference-based uncontrolled API to minimize re-renders and optimize performance in complex React forms.
- [Reference-Based State Tracking](https://awesome-repositories.com/f/web-development/direct-dom-manipulation/react-references/reference-based-state-tracking.md) — Minimizes React re-renders by tracking form values via direct element references instead of synchronized state.
- [Form Data Validation](https://awesome-repositories.com/f/web-development/form-data-validation.md) — Checks submitted values against defined schemas to ensure data requirements are met before processing. ([source](https://unform-rocketseat.vercel.app/guides/validation))
- [Form Field State Management](https://awesome-repositories.com/f/web-development/form-field-state-management.md) — Tracks individual field values and validation status to keep the user interface in sync. ([source](https://unform-rocketseat.vercel.app/api/use-field))
- [Hierarchical Form Data Mappers](https://awesome-repositories.com/f/web-development/form-field-state-management/field-data-mappers/hierarchical-form-data-mappers.md) — Organizes form fields into hierarchical objects and arrays using scoping and dot notation.
- [Form Validation Engines](https://awesome-repositories.com/f/web-development/form-validation-engines.md) — Verifies submitted form data against defined schemas and maps error messages to specific input fields.
- [Form Value Initialization](https://awesome-repositories.com/f/web-development/form-value-initialization.md) — Populates input fields with predefined values during component mounting or after asynchronous data fetches. ([source](https://unform-rocketseat.vercel.app/guides/initial-data))
- [Uncontrolled Input Registrations](https://awesome-repositories.com/f/web-development/uncontrolled-input-registrations.md) — Uses uncontrolled input patterns to capture user data from DOM elements and mobile views using references.
- [Programmatic Form Submissions](https://awesome-repositories.com/f/web-development/form-data-support/programmatic-form-submissions.md) — Enables submitting form data through a programmatic function call instead of requiring a user click. ([source](https://unform-rocketseat.vercel.app/guides/manual-form-submit))

### Software Engineering & Architecture

- [Dot-Notation Value Retrievers](https://awesome-repositories.com/f/software-engineering-architecture/array-schema-validation/dot-notation-nested-validators/dot-notation-value-retrievers.md) — Implements dot-separated key paths to retrieve and organize values within nested objects and arrays.
- [Form Validation Schemas](https://awesome-repositories.com/f/software-engineering-architecture/schema-based-state-validation/form-validation-schemas.md) — Maps validation failure paths from schemas to specific registered input identifiers for error assignment.
- [Inline Validation Displays](https://awesome-repositories.com/f/software-engineering-architecture/error-handling/validation-error-aggregators/inline-validation-displays.md) — Maps validation failure messages to specific input fields for immediate inline visual feedback. ([source](https://unform-rocketseat.vercel.app/guides/validation))
- [Third-Party Library Integrations](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/third-party-plugins/plugin-integrations/third-party-library-integrations.md) — Connects external component libraries to a centralized state manager using custom references and value paths. ([source](https://unform-rocketseat.vercel.app/examples/react-datepicker))

### Development Tools & Productivity

- [Manual Submission References](https://awesome-repositories.com/f/development-tools-productivity/manual-submission-references.md) — Executes the submission process via a reference function to collect and process all registered field data. ([source](https://unform-rocketseat.vercel.app/guides/react-native))