Inline Edit

v1.0.0·Added in 1.0.0

Edit a value where it is shown: text, long text, numbers and selects that turn into an editor in place and save optimistically.

Click or tap the value and it becomes an editor of the same size, text selected, with the text in exactly the same place. Enter saves, Escape cancels and puts focus back on the value, Tab or a click elsewhere saves (blurAction). A textarea makes new lines with Enter and saves with Cmd+Enter (Ctrl+Enter on Windows); a select opens at once and saves on the pick, as a bottom sheet on phones. From the keyboard, Tab to the value and press Enter, Space or F2. The new value shows at once with a small spinner, a check pops in when the save lands, and a failed save rolls back, shakes the value and shows the error. On touch the pencil is always visible, the save and cancel buttons get 44px hit areas and the keyboard shows Done.