Next.js ReusablesHome

Example Forms

We've put together a collection of Next.js Form examples to help you get started.

Basic Usage

This is a simple example of a contact form with name, email, and message fields.

Contact Us

Select & MultiSelect

This is a very minimal form example that contains only a single-select and a multi-select dropdown using your FormBuilder component.

Select and Multi-Select Form

Select...
Select...

File Upload Example

This is a simple example of a file upload form with a single file input field.

File Upload Form

Custom Styles

You can opt out of using the default styles by defining your own CSS classes and passing them to the FormBuilder via the styles prop.

Contact Us

Checkbox With Custom Validation Prop

In this example, we will create a form with a checkbox that requires the user to agree to terms and conditions before submitting the form.

Agree to Terms

Rich Editor

This example includes both a checkbox with custom validation using validationSchema and a rich text input for a message field using ReactQuill - rich text editor.

Form with Rich Text and Checkbox