Auto Form

screenshot of Auto Form
react
shadcn-ui

A React component that automatically creates a @shadcn/ui form based on a zod schema.

Overview:

The AutoForm for @shadcn/uiAutoForm is a React component that automatically generates a @shadcn/ui form based on a zod schema. It provides an easy way to create forms in React by automatically generating input fields based on the field types defined in the schema. The component is highly customizable and supports a variety of field types including boolean, date, enum, number, and string. It also supports optional fields, default values, sub-objects, and arrays of objects. AutoForm simplifies the process of creating forms in React and allows for easy configuration of form elements.

Features:

  • Automatic form generation: AutoForm automatically generates a form based on the zod schema, eliminating the need to manually create each input field.
  • Support for various field types: AutoForm supports a variety of field types including boolean, date, enum, number, and string.
  • Customizable field configuration: AutoForm allows for additional configuration of each field through the fieldConfig prop, such as setting default values or adding validation methods.
  • Support for optional fields: By default, all fields are required, but AutoForm provides a way to make fields optional using the optional method.
  • Easy array handling: AutoForm supports arrays of objects, allowing for easy handling and rendering of dynamic arrays in forms.
  • Flexibility in input props: Input props can be easily passed to the input component using the inputProps property, allowing for customization of individual input fields.

Summary:

AutoForm is a React component that automatically generates a form based on a zod schema. It simplifies the process of creating forms in React by eliminating the need to manually create each input field. The component supports a variety of field types, provides flexibility in configuring form elements, and allows for easy handling of arrays of objects. With AutoForm, developers can quickly create customizable forms in React with minimal effort.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

shadcn-ui
Shadcn UI

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.