Form

Group form fields together, manage their state, and handle submission.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Form example
import { Button } from "@/shim-ui/button";
import { Form } from "@/shim-ui/form";
import { TextField } from "@/shim-ui/text-field";

export default () => (
  <Form>
    <TextField isRequired label="Name" name="name" type="text" />
    <TextField isRequired label="Email" name="email" type="email" />
    <Button className="self-end" type="submit">
      Submit
    </Button>
  </Form>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add form

Validation

Use the validationErrors prop to supply error messages for each field. Refer to the React Aria forms guide for validation patterns.

Sorry, this username is taken.
User with this email already exists.
Validation example
import { Form } from "@/shim-ui/form";
import { TextField } from "@/shim-ui/text-field";

export default () => (
  <Form
    validationErrors={{
      name: "Sorry, this username is taken.",
      email: "User with this email already exists.",
    }}
  >
    <TextField label="Name" name="name" />
    <TextField label="Email" name="email" type="email" />
  </Form>
);