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. AnonChange 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
Customize the edit mode by passing editModeProps. This prop contains nested object properties that are applied to various child components in edit mode:
editMode.formRowPropsaccepts any EuiFormRow propertieseditMode.inputPropsaccepts any EuiFieldText propertieseditMode.saveButtonPropsaccepts any EuiIconButton propertieseditMode.cancelButtonPropsaccepts any EuiIconButton properties