ProfileForm

Code

<ProfileForm  values={{ name: "Sara Alharbi", username: "sara", email: "[email protected]", phone: "", bio: "", locale: "en", timezone: "Asia/Riyadh" }}  emailVerified  checkUsername={async (u) => (await api.usernameFree(u)) }  onSubmit={async (values) => {    const res = await api.saveProfile(values);    if (!res.ok) return { fieldErrors: { username: "That username is taken." } };  }}  avatar={{ src: user.avatarUrl, onChange: uploadAvatar, onRemove: removeAvatar }}  onChangeEmail={async ({ email, password }) => api.changeEmail(email, password)}  onResendVerification={() => api.resendVerification()}/>

Account · beta

Live examples and controls: ProfileForm in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/profile-form.json

A complete "Profile" page body. It tracks what changed, checks the username while the user types, and shows a sticky save bar only when there is something to save. Nasaq talks to no server: every action is an async callback you provide.

When to useCopy Anchor Link

• The Profile section of an account settings page.

When not to useCopy Anchor Link

• Sign-up: use RegisterForm.
• A form with different fields: build it from Field.

ImportCopy Anchor Link

import { ProfileForm } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

<ProfileForm
  values={{ name: "Sara Alharbi", username: "sara", email: "[email protected]", phone: "", bio: "", locale: "en", timezone: "Asia/Riyadh" }}
  emailVerified
  checkUsername={async (u) => (await api.usernameFree(u)) }
  onSubmit={async (values) => {
    const res = await api.saveProfile(values);
    if (!res.ok) return { fieldErrors: { username: "That username is taken." } };
  }}
  avatar={{ src: user.avatarUrl, onChange: uploadAvatar, onRemove: removeAvatar }}
  onChangeEmail={async ({ email, password }) => api.changeEmail(email, password)}
  onResendVerification={() => api.resendVerification()}
/>

AnatomyCopy Anchor Link

ProfileForm                    data-slot="profile-form"
├─ AvatarUpload                when avatar.onChange is set
├─ Name, Username (@, LTR), Email (badge, resend, change), Phone, Bio (counter)
├─ Language (Select), Time zone (Combobox)
├─ ChangeEmail dialog          new email + current password
└─ save bar                    data-slot="profile-form-bar"  (sticky, only when dirty)

APICopy Anchor Link

ExamplesCopy Anchor Link

• Server-side field error: return { fieldErrors: { username: "..." } } from onSubmit.
• Fixed language list: languages={[{ value: "en", label: "English" }, { value: "ar", label: "العربية" }]}.

AccessibilityCopy Anchor Link

• Every input has a visible label, help text through aria-describedby, and errors through Field.
• Availability results, resend results and save results are announced in live regions.
• The save bar is reachable by keyboard; Discard restores the saved values and returns focus.
• Autocomplete: name, username, email, tel.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale; override with labels.
• Username, email and phone stay left-to-right inside Arabic pages, and are isolated when placed inside sentences.
• Counters use Western digits.

Styling & tokensCopy Anchor Link

Uses Field, Input, Textarea, Badge, Alert and Dialog tokens; the bar uses bg-card, border-border and shadow-floating. Extend with className.

Do / Don'tCopy Anchor Link

• Do re-validate everything on the server, including username availability.
• Do return fieldErrors for problems tied to a field.
• Do not save on blur; the sticky bar is the one way to commit.
• Do not skip the password for an email change.

RelatedCopy Anchor Link

• AvatarUpload
• AccountSettings
• PhoneInput

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-account-profile-form--docs