@formbricks/react NPM

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:

Checkbox-input-form-survey-react-lib-easy-build-forms-fast-validation-multi-step

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"