Edit Profile Form
Settings form with avatar change, name and headline inputs, bio with char count, and a save bar.
Settings form with avatar change, name and headline inputs, bio with char count, and a save bar.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Edit Profile Form is the settings-style panel for updating personal details: the Marcus Kim avatar with a Change photo affordance and the PNG or JPG up to 2 MB note, a two-column row with Full name and Headline inputs, a Bio textarea with the live 124 of 200 char count, and a closed Timezone row showing Asia/Seoul (UTC+09:00) with a Change button. A muted footer bar carries the Cancel and Save changes buttons alongside the note that changes apply everywhere within a minute.
The char counter is a const so it can be made live with a single useState swap. The apply-everywhere note belongs in the save bar so it is visible at the moment of commitment, not buried in a tooltip.
Reach for this block on the profile settings page, below the account overview card. Wire Save changes to your PATCH user endpoint and show a success toast on resolve; disable the button while the request is in flight.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the personal profile editor. Other form shapes:
Tip: the char count belongs beside the label, not below the field, so users see the limit before they start typing.