Form

Gather all your input fields in one place, like a survey collecting data, making it easy to organize and submit info.

Basic

A form is a collection of inputs that allows users to submit data to a server, with built-in field error validation.

import { Form } from 'ui'
 
<Form/>

Installation

If you hit any issues, make sure you check out the installation guide here.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Validation

You can validate the form using the isRequired prop.

Preview

Code

Sometimes, server-side errors don't match the client-side validation. You can handle this by using the validationErrors prop to format them correctly.

<Form validationErrors={errors} onSubmit={() => {}}/>

Then, in the <TextField /> component, pass the errorMessage prop like this:

<TextField errorMessage={errors.name} label="Name" isRequired/>

React Hook Form is a widely-used library for managing forms in React. While it's optimized for working seamlessly with plain HTML input elements, it also supports custom components, including those from React Aria.

The example below shows how to integrate React Hook Form with React Aria Components. It demonstrates how to use the validationBehavior prop to handle validation errors, and how to use the ref prop to focus the input after validation. It's taken from the official of react aria components documentation.

import { Button, FieldError, Form, Input, Label, TextField } from "react-aria-components"
import { Controller, useForm } from "react-hook-form"
 
function App() {
  const { handleSubmit, control } = useForm({
    defaultValues: {
      name: ""
    }
  })
  const onSubmit = (data) => {
    // Do something with the form data
  }
 
  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="name"
        rules={{ required: "Name is required." }}
        render={({
          field: { name, value, onChange, onBlur, ref },
          fieldState: { invalid, error }
        }) => (
          <TextField
            name={name}
            value={value}
            onChange={onChange}
            onBlur={onBlur}
            isRequired
            validationBehavior="aria"
            isInvalid={invalid}
          >
            <Label>Name</Label>
            <Input ref={ref} />
            <FieldError>{error?.message}</FieldError>
          </TextField>
        )}
      />
      <Button type="submit">Submit</Button>
    </Form>
  )
}

Drop Zone Field