Form [react-aria-components]

Forms 16

About

A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors. The HTML <form> element can be used to build forms. React Aria's Form component extends HTML forms with support for providing server-side validation errors to the fields within it.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Form [react-aria-components] to your project and fits it to your theme.

Code

How Form [react-aria-components] is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { Form } from "react-aria-components"

import { Button } from "@/components/ui/button"
import { FieldError, Label } from "@/components/ui/field"
import { Input, TextField } from "@/components/ui/textfield"

function FormDemo() {
  return (
    <Form className="flex flex-col gap-2">
      <TextField name="email" type="email" isRequired>
        <Label>Email</Label>
        <Input />
        <FieldError />
      </TextField>
      <Button className="w-fit" type="submit">
        Submit
      </Button>
    </Form>
  )
}

export { FormDemo }