blink design library

Editable Fields

In forms that let users change previously-created information, a question that can arise about whether fields should be displayed initially in an editable state (running the risk that one or more might be accidentally changed) or in "locked" state with the option to edit.

This form uses a hybrid approach, locking the fields where accidental edits could have the most serious consequences:

From: Vox

This form also correctly displays the fields as inactive (vs. non-editable, which would display as plain text minus the field border). When a user clicks the associated "change" button the field becomes active.

Actions Display on Rollover

This is an alternative way to provide Edit and Delete actions for each item without cluttering up the list with multiple instances of Edit and Delete links. There is potentially a discoverability issue here, but this is mitigated by the implementation - the entire line item is "hot" so rolling over it at any point triggers the display.

From: Backpack