Form

import { ErrorSummary, Form, FormSelect, FormSubmitButton, FormTextField, SelectItem } from "@rdloom/react";

const looksLikeEmail = (value: string) => (/^\S+@\S+\.\S+$/.test(value) ? null : "Enter an email address like name@example.com.");

export default function FormValidationExample() {
  return (
    <Form className="w-96" defaultValues={{ name: "", email: "", role: null }} onSubmit={() => {}}>
      {/* After a failed submit focus moves here; each item takes you to its field. */}
      <ErrorSummary />
      <FormTextField name="name" label="Full name" isRequired requiredMessage="Enter the person's full name." />
      <FormTextField
        name="email"
        label="Email"
        type="email"
        description="We send the invitation here."
        isRequired
        validate={looksLikeEmail}
      />
      <FormSelect name="role" label="Role" placeholder="Choose a role" isRequired>
        <SelectItem id="admin">Admin</SelectItem>
        <SelectItem id="editor">Editor</SelectItem>
        <SelectItem id="viewer">Viewer</SelectItem>
      </FormSelect>
      <FormSubmitButton>Send invitation</FormSubmitButton>
    </Form>
  );
}

import { Alert, ErrorSummary, Form, FormSubmitButton, FormTextField } from "@rdloom/react";

// Stands in for your own request; it fails for one address so the error state shows.
async function saveProfile(values: { name: string; email: string }) {
  await new Promise((resolve) => setTimeout(resolve, 800));
  if (values.email === "taken@example.com") {
    return { fieldErrors: { email: "That email is already in use." } };
  }
}

export default function FormAsyncSubmitExample() {
  return (
    <Form
      className="w-96"
      defaultValues={{ name: "Ada Lovelace", email: "ada@example.com" }}
      onSubmit={saveProfile}
      successMessage="Profile saved."
    >
      {({ state }) => (
        <>
          <ErrorSummary />
          {state === "success" && <Alert variant="success">Profile saved.</Alert>}
          <FormTextField name="name" label="Full name" isRequired />
          <FormTextField name="email" label="Email" type="email" isRequired description="Try taken@example.com to see the error state." />
          <FormSubmitButton>{state === "pending" ? "Saving" : "Save profile"}</FormSubmitButton>
        </>
      )}
    </Form>
  );
}

import { Form, FormSubmitButton, FormSwitch, FormTextField, useFormValues } from "@rdloom/react";

type Values = { name: string; invoiceByPost: boolean; address: string };

// A field that exists only while a choice is on: it is checked only while it is shown.
function Address() {
  const byPost = useFormValues<Values, boolean>((v) => v.invoiceByPost);
  return byPost ? <FormTextField name="address" label="Postal address" multiline isRequired /> : null;
}

export default function FormConditionalFieldExample() {
  return (
    <Form<Values> className="w-96" defaultValues={{ name: "", invoiceByPost: false, address: "" }} onSubmit={() => {}}>
      <FormTextField name="name" label="Company name" isRequired />
      <FormSwitch name="invoiceByPost">Send invoices by post</FormSwitch>
      <Address />
      <FormSubmitButton>Save</FormSubmitButton>
    </Form>
  );
}