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
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>
)
}