ProfileForm

Edit personal details on the evolve-feature-form pattern: a RAC Form validated by ProfileFormSchema, clean until the first submit then live, submit never disabled. onValidSubmit runs the useUpdateProfile mutation.

import { ProfileForm } from "@evolve-storefront/feature-account/profile-form";

Renders inside AccountProvider.

Preview

DefaultOpen in Storybook ↗

Usage

const { formProps } = useProfileForm({ onProfileSaved: close });

<ProfileForm
  {...formProps}
  defaultValues={{ givenName: customer.givenName ?? "", familyName: customer.familyName ?? "" }}
  onCancel={close}
/>;

Props

Prop	Type	Description
onValidSubmit	(values: { givenName: string; familyName: string; salutation?: "MR" | "MS" | "MX" | "NONE" | undefined; }) => void
validationBehavior?	"aria" | "native"	Default "aria": mark fields via ARIA rather than blocking native submit. The form is then noValidate, so an input's own constraint (type="email") never stops the submit with a browser tooltip that the field's error does not match.
defaultValues?	Partial<{ givenName: string; familyName: string; salutation?: "MR" | "MS" | "MX" | "NONE" | undefined; }>
isPending?	boolean
error?	string | null	Form-level error (e.g. a failed mutation).
serverErrors?	FormValidationErrors
onCancel?	(() => void)

Any other props go to the root element, like on a plain HTML element.

Examples

PendingSubmitting: the button shows the pending label (never disabled).

// `useProfileForm` passes this through formProps; set it yourself only when
// driving the form from your own mutation.
<ProfileForm onValidSubmit={save} isPending={mutation.isPending} />;

Open in Storybook ↗

With ErrorA failed mutation surfaces a form-level error above the actions.

// `useProfileForm` maps a failed mutation by code into formProps.error.
<ProfileForm onValidSubmit={save} error={mutation.isError ? t("save-error") : null} />;

Open in Storybook ↗