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 '@/components/ui'
 
<Form />

Installation

In the terminal, run the following command to begin:
npx hq-kit add form

Validation

You can validate the form using the isRequired prop.

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

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 ZoneText Field