FormSubmit

Customize the pending indicator

Create the form state with useForm, then keep FormSubmit inside Form. This complete example awaits a local operation and replaces the default ring with a colored dots Spinner.

FormSubmit — a submit button with a custom loader

FormSubmit belongs inside Form and inherits Button's presentation props: variant, appearance, size, radius, fullWidth, icons, className, style and classNames. Form owns type=submit and loading through isSubmitting, so an asynchronous onSubmit drives the pending state automatically.

Provide loadingIndicator to replace the ring. Configure the Spinner's appearance and variant to change its shape and color, or supply your own decorative content. classNames.spinner styles its wrapper independently of the label. Omit the prop for the default ring, or pass null to hide the visual. This new prop awaits the next package release.

"use client";

import { useState } from "react";
import { Form, FormSubmit, Input, Spinner, useForm } from "@pimolu/react";

export function CustomSubmit() {
  const [message, setMessage] = useState("");
  const form = useForm({
    defaultValues: { name: "Ada" },
    onSubmit: async (values) => {
      await new Promise((resolve) => setTimeout(resolve, 1200));
      setMessage("Saved locally: " + values.name);
    },
  });
  return (
    <Form form={form} autoComplete="off" className="grid gap-4">
      <Input label="Name" {...form.register("name")} />
      <FormSubmit
        appearance="solid"
        loadingIndicator={<Spinner
          appearance="dots"
          size="sm"
          variant="warning"
          decorative
        />}
      >
        {form.isSubmitting ? "Saving…" : "Save locally"}
      </FormSubmit>
      <p role="status">{message}</p>
    </Form>
  );
}

Integration notes

The loadingIndicator prop is available in 0.1.0-beta.4. See Usage and API reference below for the supported inherited Button props.

New to Pimolu? Follow the Quick start or the Next.js guide for the shared stylesheet and application provider.

More examples

Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.

Usage

Place FormSubmit inside Form. It renders a Button with type=submit and reads form.isSubmitting automatically. Return or await your asynchronous work in useForm's onSubmit so the pending state lasts until that work completes.

Use Button's variant, appearance, size, radius, fullWidth, icons, disabled, className and style props. Do not pass type or loading: Form owns both. Prevent submission through validation rather than running business logic in onClick.

loadingIndicator accepts a decorative Spinner or custom React content. Configure Spinner's appearance, size and variant to change its shape and color. Omission keeps the ring; null/false hides the visual while retaining disabled and aria-busy. This prop ships in 0.1.0-beta.4.

Use classNames.root, label and spinner for named-part customization. Form-level classNames.submit styles the submit button; prefer the page's local classes when several forms need different treatments.

API reference

Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.

Accessibility

• Keep an explicit action label. During submission the button is disabled and exposes aria-busy. A decorative loader does not replace a readable pending or completion message.
• Use a polite status message for the result. Do not nest interactive controls inside loadingIndicator. Pimolu Spinner supports reduced motion; custom animations must honor that preference too.

Related components