@formbricks/react

Building React forms just got really 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="How can we reach you?" validation="required|email" />
      <Checkbox
        name="terms"
        label="Terms & Conditions"
        help="To use our service, please accept."
        validation="accepted"
      />
      <Submit label="Let's go!" />
    </Form>
  );
}

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)

Custom Styling (CSS & Tailwind)

Giving your form the right look and feel is very likely why you chose to use code. Formbricks React supports styling with a custom style sheet as well as Tailwind CSS.

Custom Stylesheet

Simply create a style sheet, import it and add your CSS to these classes:

CSS Class	Description
formbricks-form	The outermost wrapping element.
formbricks-outer	A wrapper around the label input, help text and error messages.
formbricks-legend	The legend (often a question)
formbricks-help	The help text itself.
formbricks-options	A wrapper around all options.
formbricks-option	A wrapper around each option.
formbricks-wrapper	A wrapper around the label and the input field (no help text).
formbricks-label	The label itself.
formbricks-inner	A wrapper around the input element.
formbricks-input	The input element itself, here the radio button.
formbricks-message	The element (or many elements) containing a message — often validation and error messages.
formbricks-messages	A wrapper around all the messages.

Tailwind CSS

We love Tailwind! This is why Formbricks React natively supports Tailwind. All you have to do is target the classes using props. For example, to extend “formbricks-outer” class:

<Text name="firstname" label="What's your first name?" outerClassName="bg-gray-800 my-5" />

Validation & Error Messages

Validation prevents users from submitting missing of false data.

To add a validation to your inputs, add the validation prop and write the rules in string syntax. Rules are divided by a pipe (|), e.g.:

<Text name="age" label="What's your age?" validation="required|number|min:0|max:100" />

Rule	Explanation	Example
required	Only accepts non-empty fields	“required”
number	Only accepts fields with a number or float value	“number”
min	Only accepts number values that are greater or equal to the value provided	“min:10”
max	Only accepts number values that are greater or equal to the value provided	“max:50”
accepted	Only accepts a truish value (true or 1)	"accepted"
url	Only accepts URLs e.g. "https://formbricks.com"	"url"
email	Only accepts email addresses	"email"

Docs

Dive into the Docs and join our Discord to request features and report bugs.

Shoutout

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

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