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

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 EuiButtonIcon properties
editMode.cancelButtonProps accepts any EuiButtonIcon properties

Props

EuiInlineEditText

Extends HTMLAttributes


Prop	Description and type	Default value
Prop inputAriaLabel#	Description and type Form label that appears above the form control. This is required for accessibility because there is no visual label on the input. Type: `string`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop placeholder#	Description and type Type: `string`	Default value
Prop onSave#	Description and type Callback that fires when a user clicks the save button. Passes the current edited text value as an argument. To validate the value of the edited text, pass back a boolean flag. If `false`, EuiInlineEdit will remain in edit mode, where loading or invalid states can be set. If `true`, EuiInlineEdit will return to read mode. Type: `(value: string) => boolean \| void \| Promise<boolean \| void>`	Default value
Prop startWithEditOpen#	Description and type Starts the component in edit mode Type: `boolean`	Default value
Prop readModeProps#	Description and type Props that will be applied directly to the `EuiEmptyButton` displayed in read mode Type: `Partial<EuiButtonEmptyPropsForButton>`	Default value
Prop editModeProps#	Description and type Multiple props objects that can be applied directly to various child components displayed in edit mode. `formRowProps` will be passed to `EuiFormRow` `inputProps` will be passed to `EuiFieldText` `saveButtonProps` & `cancelButtonProps` will be passed to their respective `EuiButtonIcon`s Type: `{ formRowProps?: Partial<(DisambiguateSet<LabelProps, LegendProps> & { labelType?: "legend"; } & CommonProps & { display?: "center" \| "row" \| "columnCompressed" \| "centerCompressed" \| "rowCompressed"; ... 11 more ...; isDisabled?: boolean; } & Omit<...>) \| (DisambiguateSet<...> & ... 3 more ... & HTMLAttributes<...>...`	Default value
Prop isLoading#	Description and type Loading state - only displayed in edit mode Type: `boolean`	Default value
Prop isInvalid#	Description and type Invalid state - only displayed edit mode Type: `boolean`	Default value
Prop isReadOnly#	Description and type Locks inline edit in read mode and displays the text value Type: `boolean`	Default value
Prop value#	Description and type To use inline edit as a controlled component, continuously pass the value via this prop Type: `string`	Default value
Prop onCancel#	Description and type Callback required to reset `value` to the previous read mode text value. Type: `((previousValue: string) => void) \| ((previousValue: string) => void)`	Default value
Prop size#	Description and type Text size level Type: `EuiInlineEditTextSizes`	Default value `m`

EuiInlineEditTitle