DOCSEARCHbyAlgolia
Submit Docs

uniforms

website·Indexed 33 days ago

https://uniforms.tools/

A schema-driven form library for React that provides a unified way to create forms using bridges for various schemas (such as Zod, JSON Schema, and GraphQL) and theme packages for different UI frameworks (including Ant Design, Semantic UI, and Bootstrap). The documentation covers versions 3.0 and 4.0, detailing components like AutoForm, AutoField, and the connectField helper.

Tokens
28.2K
Snippets
140
Records
197
Agent score
68%

What's inside uniforms

  1. Overview of uniforms React form library

    uniforms is a set of open-source React libraries that generate forms from schemas. It aims to reduce form boilerplate code, simplify the separation of concerns, and provide automatic state management and validation (both inline and asynchronous).

  2. Overview of Uniforms React libraries

    Uniforms is a set of React libraries used to simplify form creation by generating complete forms from any data schema. It abstracts the complexities of form state management, validation, and submission, allowing developers to generate forms automatically based on a provided schema rather than building fields manually.

  3. Overview of Uniforms Bridges

    To use any schema with Uniforms, you must create a 'bridge'—a unified schema mapper. Depending on your schema definition, you should use the corresponding bridge package.

  4. Overview of predefined uniforms form fields

    uniforms provides a set of predefined components implemented across all theme packages to be used as form fields. Key components include:

    • AutoField / AutoFields: Automatic rendering based on schema.
    • BoolField: Checkbox input.
    • DateField: HTML5 date/datetime-local input.
    • ErrorField / ErrorsField: Validation error displays.
    • HiddenField: Hidden input.
    • ListAddField / ListDelField / ListField / ListItemField: Components for managing lists of fields.
    • LongTextField: Textarea.
    • NestField: Block for nested fields.
    • NumField: Numeric input.
    • RadioField: Radio checkbox.
    • SelectField: Select dropdown or radio set.
    • SubmitField: Submit button.
    • TextField: Standard text or HTML5 compatible input.

  5. Overview of predefined uniforms field components

    Uniforms provides a set of core field components guaranteed to be implemented across all theme packages. These include:

    • AutoField / AutoFields: Automatic rendering based on schema.
    • BoolField: Checkbox/Toggle.
    • DateField: HTML5 date/datetime-local input.
    • TextField / LongTextField: Text input and Textarea.
    • NumField: Numeric input.
    • SelectField / RadioField: Selection inputs.
    • ListField / ListItemField / ListAddField / ListDelField: Components for handling lists of fields.
    • NestField: Block of nested fields.
    • ErrorField / ErrorsField: Validation error displays.
    • HiddenField: Hidden input.
    • SubmitField: Submit button.

  6. Overview of Uniforms React form libraries

    Uniforms is a set of React libraries designed to build forms from any schema. Unlike traditional form packages, Uniforms can completely generate a form automatically without the need to manually define every field. It handles state management, validation, and submission. Key features include:

    • Automatic form generation
    • Fields capable of rendering any schema
    • One-line helpers for creating custom fields
    • Inline and asynchronous form validation
    • Integration with various schemas
    • Support for multiple UI themes

  7. Choose a form component based on required capabilities

    Uniforms uses a class-based inheritance system to provide different form capabilities. Depending on the level of validation and automation needed, developers typically choose between AutoForm and ValidatedForm, though other specialized forms exist. This architecture allows the library to provide extensible components with a separation of concerns without the deeply nested component trees typically caused by multiple Higher-Order Components (HOCs).

  8. Understand the Uniforms Bridge concept

    Uniforms uses a 'bridge' to operate on schemas. A bridge acts as a unified schema mapper that allows the library's internals to read schema data, perform validation, and generate errors regardless of the original schema format. Developers must use a predefined schema-to-bridge mapper or create a custom one to connect their schema to Uniforms.

  9. Use Forminer for commercial no-code form building

    Forminer is a commercial implementation of the uniforms library designed for building no-code tools. It utilizes a schema-first approach and provides a full state machine and custom fields to accelerate development for projects requiring deep integration with specific design systems.

  10. Choose the appropriate Uniforms form component

    Uniforms provides several form components depending on whether you need automatic field generation, state management, or validation.

    • AutoForm: The most common choice. Self-generates fields from schema, manages its own state, and handles validation.
    • ValidatedQuickForm: Self-generates fields and handles validation, but does not manage state (requires external state management).
    • ValidatedForm: Handles validation but does not self-generate fields or manage state.
    • QuickForm: Self-generates fields from schema but does not handle validation or state management.
    • BaseForm: The foundation component; no automatic generation, validation, or state management.

  11. Understand Uniforms form class inheritance

    Uniforms uses a class-based inheritance system to provide different form capabilities. Instead of nesting multiple Higher-Order Components (HOCs), which can clutter the React component tree, Uniforms uses a 'trait-like' approach with ES6 classes to maintain extensibility and separation of concerns while keeping the component tree clean. The most commonly used form types are AutoForm and ValidatedForm.

  12. Understand the Uniforms form inheritance model

    Uniforms uses a class-based inheritance concept to provide different form capabilities while maintaining extensibility and separation of concerns. Instead of nesting multiple Higher-Order Components (HOCs), which can clutter React DevTools and reduce readability, Uniforms implements a 'traits' approach using ES6 classes. This allows developers to compose forms with specific capabilities—such as AutoForm or ValidatedForm—while keeping the resulting component structure clean.