Shim

Form

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

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Install
pnpm dlx @kkga/shim add form
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.

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