I'm looking for a user friendly way to display a form which has 2 states display and edit. I have this component which renders a basic form.

This will Render two states which look like this:

enter image description here enter image description here

as you can see the edit button looks out of place, I would like to have this to look more like an editable form, perhaps with a colored header and less space between the edit button and list.

Does anyone know of a way to do this? Also, and other UX Tips would be greatfully appreciated


2 Answers 2


As far as UX is concerned, consider having the "Edit" icon on the top-right corner of the header. Once clicked, change the title from "Profile" to "Edit Profile" and the edit button to "Save".

The profile pic should have an overlay saying "edit"

Profile Profile edit

  • 1
    Looks perfect. Optional - Instead of icons, you can even add text "Edit" and "Save" after making the changes. The save button should be in disable state when no changes are made. If it encounters any change then activate the save button.
    – NB4
    Jun 27, 2017 at 13:05

I think you have to ask qourself the following question:

Is this form being edited mutiple times? Yes: Go for an 'edit mode' No: Go for 'inline edit'

Since there are only three fields, you might consider to use the 'edit pencil' behind the rows as a third option.

Not the answer you're looking for? Browse other questions tagged or ask your own question.