Formbricks Open source Forms & Surveys Logo

React Form Library

Building React forms just got easy

Every developer works with forms, few like their experience. Building Forms, especially in React, can be pretty annoying. State management, validation, form components, accessibility, internationalization and performance are all things you have to deal with, but don't really want to.

We make building - and maintaining - forms easier than ever in the world of React.

Example

import { Form, Text, Email, Checkbox, Submit } from "@formbricks/react";
import "@formbricks/react/styles.css";

export default function WaitlistForm() {
  return (
    <Form onSubmit={({ data, schema }) => console.log("data:", data, "schema:", schema)}>
      <Text name="name" label="What's your name?" validation="required" />
      <Email
        name="email"
        label="What's your email address?"
        placeholder="you@example.com"
        validation="required|email"
      />
      <Checkbox
        name="terms"
        label="Terms & Conditions"
        help="To use our service, please accept."
        validation="accepted"
      />
      <Submit label="Let's go!" />
    </Form>
  );
}
Data log of a form created with the fastest react form builder

Why is this easier already?

  • One easy to use syntax for all input types
  • HTML & non-HTML input types available out of the box
  • Easily maintainable with component-based approach
  • All characteristics adjustable via props
  • Automatic schema generation

What is to come?

  • Conditional logic
  • Multi-page forms
  • Accessibility
  • Internationalization
  • Form Templates (content & styles)

Shoutout

The Formbricks React Library is built on top of React Hook Form to make from their data handling and performance optimizations.

The developer experience is inspired by the great FormKit for Vue.js Library.

Previous
Quick start