Inline edit

---

The EuiInlineEdit components are useful for updating single lines of text outside a form. The component has two states: readMode shows editable text inside of a button and editMode displays a form control to update the text.

Display and edit basic text

Use EuiInlineEditText to display and edit basic text. Adjust the size property to change the font size in both readMode and editMode.

Display and edit headings and titles

Use EuiInlineEditTitle to display and edit titles. Use the heading property to set the heading level in readMode.

Controlled values

To control the text value for inline edit, use the value prop to continually pass a text value. An onChange callback is required to receive and update value based on user input. An onCancel callback is required to reset the value to the previous read mode text value.

Saving edited text

Use the onSave property to retrieve the value of the edited text when the save button is pressed. onSave does not fire if the user cancels their edit.

Validating edited text

Validation states (isLoading and isInvalid) only display while the user is in edit mode.

Return a boolean from your onSave callback to validate text after pressing Save. You can also return a boolean from a promise. Validation happens before the user returns to read mode.

Returning false from onSave will keep the user in edit mode, where you can then display validation state and messages. Returning true or undefined will return the user to read mode.

Setting placeholder instructions

The placeholder property will display in both read and edit mode whenever the EuiInlineEdit's value is empty. Use placeholder text to provide guidance or instructions to consumers as to what they're editing.

Start in edit mode

Use the startWithEditOpen prop to default to opening in edit mode.

Read only

Use the isReadOnly prop to lock EuiInlineEdit in read mode and display the text value. This does not affect the input form control in edit mode.

Customizing read and edit modes

Customize the read mode by passing readModeProps, which accepts any EuiButtonEmpty properties.

Customize the edit mode by passing editModeProps. This prop contains nested object properties that are applied to various child components in edit mode:

• editMode.formRowProps accepts any EuiFormRow properties
• editMode.inputProps accepts any EuiFieldText properties
• editMode.saveButtonProps accepts any EuiIconButton properties
• editMode.cancelButtonProps accepts any EuiIconButton properties