Inline edit
Click-to-edit text, select and date values in place with Enter/Escape, validation, an optimistic save with spinner and rollback on error, and a hover pencil affordance.
Preview
Status
Owner
Due
Estimate
Notes
Click any value to edit. Enter saves, Escape cancels. A title containing “fail” shows the rollback.
Editing
Saving
Save failed, rolled back
That key is taken. Kept “LNT”.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | Date | null | — | The saved value (Date for InlineEditDate). |
| onSave | (value) => void | Promise<void> | — | Return a promise to show a spinner; a rejection rolls back and shows its message. |
| label | string | — | Field name, used in “Edit title: …” and the field label. |
| validate | (value: string) => string | null | — | InlineEditText: return a message to block saving. |
| multiline | boolean | false | InlineEditText: textarea; ⌘/Ctrl+Enter saves. |
| textClassName | string | — | InlineEditText: text size and weight in both modes. |
| defaultEditing | boolean | false | InlineEditText: start in edit mode without taking focus (for previews). |
| defaultStatus / defaultError | "saving" | "error" · string | — | InlineEditText: start with a spinner, or rolled back with this message (for previews). |
| options | { value, label, icon? }[] | — | InlineEditSelect: choices shown in a menu. |
| today / locale | Date · string | — · "en-US" | InlineEditDate: today marker and date format. |
| placeholder | string | "Empty" | Shown when there is no value. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.