shadcn.io is not affiliated with official shadcn/ui
In-Place Edit Profile Block for Solid
A profile that edits in place: display name, headline, location and a bio that counts 160 characters, each an Editable that saves on its own, a time-zone select that says the local time, a Show my email switch, a list of recent edits and an Undo.
Installation
Overview
Let people fix their public profile where they read it, with this in-place profile editor for Solid with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it is the form itself: the person's initials sit beside the display name, and below it the headline, location, time zone, bio and a Show my email switch, each row with its label at the start and a hint under the value. The text rows are Editable: a pencil (or a press on the value) turns the text into a field, Enter saves it, Escape puts the old text back, and a name or headline with no text is refused in words. The bio edits in a text area and counts its 160 characters as you type. The time zone is a Native Select that says the local time it means at a typed moment, and the Switch keeps the email out of the member list until it is on. There is no Save button: every change saves on its own, adds a line to Recent edits (the last four, in rows of fixed height) and says what changed in the foot, where Undo takes the latest back. It's built from Editable, Native Select, Switch, Textarea, Avatar, Button and Guides, with a CSS entrance only and no primary button, because nothing waits to be saved. The member, her details and the app are invented. For a community profile, a member directory or any settings page where each detail stands alone.
FAQ
How do I fill it with my own member?
Edit START (the name, headline, location, bio, the chosen zone and whether the email shows), ROWS (a label, a hint, the field's length and the sentence a too-short text is refused with), ZONES (a city and its minutes east of UTC) and EMAIL. The initials are worked out from the display name, so changing the name changes them. The local time in the time-zone line is worked out from NOW_UTC, a typed moment, never from the clock: replace it with the time you want to show, or with Intl.DateTimeFormat and a real zone name when you wire it up.
What stays local, and how do I make it real?
Everything. A change updates this page's state, adds a line to Recent edits and says so in the foot; nothing is sent or stored, and a reload starts again from START. To make it real, call your endpoint in commitField, chooseZone and flipEmail, change the profile only when it answers and put a failure in the same status line. Undo then needs a call of its own, because it puts the earlier profile back.
How do I edit a field, and what does each key do?
Press the pencil (or the value) to edit: the text becomes a field with a check and a cross. Enter saves it, Escape or the cross puts the old text back and says "Kept it as it was." Pressing Enter on a name, headline or location with no text keeps the saved one and says why in the foot, and the check is held while the text is too short. Enter in the bio saves it too. Changing the time zone or the switch saves at once, since there is nothing to type.
How do Recent edits and Undo work?
Each saved change adds a line at the top of Recent edits ("Headline: Staff engineer to Principal engineer"); the list shows the last four and says how many there are. Undo takes the latest edit back, restoring the field it changed, and removes its line; press it again to step further back. It is always on the page, held quiet when there is nothing to undo, so nothing moves when the first edit is made.
Is it accessible, and how does it look on a phone?
Each pencil, check and cross is named for its field ("Edit headline", "Save headline"), every field is linked to its hint or reason, the status line is a polite live region present from the start, and the characters count of the bio is part of the field's description. On a phone each label sits above its value and the foot with the status and Undo stays pinned to the bottom of the screen, with Undo as an icon. Names, places and the email keep their own reading order in a right-to-left page.