Form

A native form element with consolidated error handling and validation.
1<Form
2  onSubmit={(e) => {
3    e.preventDefault();
4    alert("Submitted!");
5  }}
6>
7  <Field label="Email" required>
8    <InputField type="email" placeholder="Enter email" />
9  </Field>
10  <Field label="Message" optional>
11    <TextArea placeholder="Enter message" />
12  </Field>
13  <Button type="submit">Submit</Button>
14</Form>

Anatomy

Import and assemble the component:

1import { Form, Field, InputField, Button } from "@raystack/apsara";
2

3<Form onSubmit={handleSubmit}>
4  <Field label="Email">
5    <InputField placeholder="Enter email" />
6  </Field>
7  <Button type="submit">Submit</Button>
8</Form>

API Reference

Prop

Type

Examples

Basic Form

A simple form with submit handling.

1<Form
2  onSubmit={(e) => {
3    e.preventDefault();
4    alert("Submitted!");
5  }}
6>
7  <Field label="Name" required>
8    <InputField placeholder="Enter your name" />
9  </Field>
10  <Button type="submit">Submit</Button>
11</Form>

With Fields

Form with multiple fields using the Field component.

1<Form
2  onSubmit={(e) => {
3    e.preventDefault();
4  }}
5>
6  <Field label="First Name" required>
7    <InputField placeholder="John" />
8  </Field>
9  <Field label="Last Name" required>
10    <InputField placeholder="Doe" />
11  </Field>
12  <Field label="Email" required helperText="We'll send a confirmation email">
13    <InputField type="email" placeholder="john@example.com" />
14  </Field>
15  <Field label="Bio" optional>

Server-Side Errors

Pass server validation errors to the errors prop. Errors clear automatically when the user modifies the corresponding field.

1(function ServerErrorExample() {
2  const [errors, setErrors] = React.useState({});
3

4  async function handleSubmit(e) {
5    e.preventDefault();
6    // Simulate server validation
7    setErrors({ email: "This email is already taken" });
8  }
9

10  return (
11    <Form onSubmit={handleSubmit} errors={errors}>
12      <Field name="email" label="Email" required>
13        <InputField type="email" placeholder="Enter email" />
14      </Field>
15      <Button type="submit">Submit</Button>

Validation Modes

Control when validation occurs: onSubmit (default), onBlur, or onChange.

1<Form validationMode="onSubmit">
2  <Field name="email">
3    <Field.Label>Email</Field.Label>
4    <Field.Control type="email" required placeholder="Validated on submit" />
5    <Field.Error match="valueMissing">Email is required</Field.Error>
6    <Field.Error match="typeMismatch">Enter a valid email</Field.Error>
7  </Field>
8  <Button type="submit">Submit</Button>
9</Form>

Accessibility

  • Renders a native <form> element
  • Works with native constraint validation attributes (required, pattern, minLength, etc.)
  • Compatible with React Hook Form, TanStack Form, and other form libraries