Settings — Profile editor with identity rail

A compact identity and visibility rail sits beside a profile form with public and contact sections. Use when account identity needs its own editing layout.

ReactHTML

1440 × 900

Open in new tab

Component.tsx145 lines

export default function SettingsProfileEditor() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            Edit your profile
          </h1>
          <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
            Describe which profile details are visible to other members.
          </p>
        </div>
        <form className="mt-10 grid items-start gap-10 lg:grid-cols-[16rem_minmax(0,1fr)]">
          <aside className="rounded-lg bg-neutral-50 p-6">
            <span
              aria-hidden="true"
              className="flex size-16 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
            >
              AR
            </span>
            <h2 className="mt-4 text-lg font-semibold">Alex Rivera</h2>
            <p className="mt-2 text-sm text-neutral-600">
              Profile visibility summary.
            </p>
            <p className="mt-6 text-sm">
              <a
                href="#"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                View public profile
              </a>
            </p>
          </aside>
          <div>
            <fieldset>
              <legend className="text-base font-semibold">
                Public profile
              </legend>
              <div className="mt-6 grid gap-6 sm:grid-cols-2">
                <div className="min-w-0">
                  <label
                    htmlFor="settings-profile-editor-name"
                    className="block text-sm font-medium"
                  >
                    Display name
                  </label>
                  <input
                    id="settings-profile-editor-name"
                    name="name"
                    type="text"
                    defaultValue="Alex Rivera"
                    required
                    className="mt-2 h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  />
                </div>
                <div className="min-w-0">
                  <label
                    htmlFor="settings-profile-editor-role"
                    className="block text-sm font-medium"
                  >
                    Role
                  </label>
                  <input
                    id="settings-profile-editor-role"
                    name="role"
                    type="text"
                    placeholder="Role or job title"
                    className="mt-2 h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  />
                </div>
              </div>
              <div className="mt-6">
                <label
                  htmlFor="settings-profile-editor-bio"
                  className="block text-sm font-medium"
                >
                  Biography
                </label>
                <textarea
                  id="settings-profile-editor-bio"
                  name="biography"
                  rows={3}
                  aria-describedby="settings-profile-editor-bio-hint"
                  className="mt-2 w-full rounded-md border border-neutral-300 bg-white p-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  placeholder="Short introduction and responsibilities"
                />
                <p
                  id="settings-profile-editor-bio-hint"
                  className="mt-2 text-sm text-neutral-600"
                >
                  Keep your introduction under 160 characters.
                </p>
              </div>
            </fieldset>
            <fieldset className="mt-8 border-t border-neutral-200 pt-8">
              <legend className="text-base font-semibold">
                Contact details
              </legend>
              <div className="mt-6">
                <div className="min-w-0">
                  <label
                    htmlFor="settings-profile-editor-email"
                    className="block text-sm font-medium"
                  >
                    Email
                  </label>
                  <input
                    id="settings-profile-editor-email"
                    name="email"
                    type="email"
                    placeholder="name@example.com"
                    required
                    autoComplete="email"
                    aria-describedby="settings-profile-editor-email-hint"
                    className="mt-2 h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                  />
                  <p
                    id="settings-profile-editor-email-hint"
                    className="mt-2 text-sm text-neutral-600"
                  >
                    Your email is private unless you choose to share it.
                  </p>
                </div>
              </div>
            </fieldset>
            <div className="mt-8 flex flex-wrap gap-3">
              <button
                type="submit"
                className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Save profile
              </button>
              <a
                href="#"
                className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Cancel
              </a>
            </div>
          </div>
        </form>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for member identity editing with visibility context. Choose settings-sidebar-sections for a complete settings navigation shell. Variations: add pronouns, replace role with department, or add an external profile URL.
Hierarchy: The h1 precedes the identity rail and public editing fields, then private contact details and Save profile. The visible name identifies the decorative initials. Headline up to 5 words, lede 18, biography at most 160 characters and hints 12 words.
Responsive: Below lg the identity rail moves above the form. Name and role stack below sm. The textarea remains full width and vertically resizable; all text can wrap at 320px.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A 256px/minmax(0,1fr) sidebar grid starts at lg with 40px gaps. The neutral-50 rail has 24px padding. The main form divides public and contact fields with a top border; name and role become two columns at sm.
States: Links and controls have a 2px neutral-900 keyboard-focus outline offset by 2px. Filled actions change to neutral-700 on hover, outlined actions to neutral-50, and underlined links to neutral-600. Native form fields retain browser validation; controls describe structure and need application integration for persistence or navigation.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Edit your profile                                             │
│ AR  Alex Rivera     Public profile                           │
│Visibility summary   Display name            Role             │
│[View profile]       [Alex Rivera         ]  [Role       ]    │
│                     Biography                                │
│                     [Short introduction                ]     │
│                     Contact details                          │
│                     Email [name@example.com            ]     │
│                     [Save profile] [Cancel]                  │
└──────────────────────────────────────────────────────────────┘

View all

Settings — Active sessions with security footer
Layout tags: stacked,list,compact
Settings — Billing cards and invoices
Layout tags: asymmetric,numbers,table
Settings — Danger zone
Layout tags: stacked,list,form

Settings — Profile editor with identity rail

Pattern notes

More in Settings

Settings — Active sessions with security footer

Settings — Billing cards and invoices

Settings — Danger zone