Inline editable text field

An inline editable text field displays a text field that switches between reading and editing on the same page.

Examples Code Usage Changelog

Props

`analyticsContext`
Description	Additional information to be included in the `context` of analytics events that come from button.
Type	`{ [x: string]: any; }`

`cancelButtonLabel`
Description	Accessibility label for the cancel action button.
Type	`string`

`confirmButtonLabel`
Description	Accessibility label for the confirm action button, which saves the field value into `editValue`.
Type	`string`

`defaultValue`
Required
Description	The user input entered into the field during `editView`. This value is updated and saved by `onConfirm`.
Type	`any`

`editButtonLabel`
Description	Accessibility label for button, which is used to enter `editView` from keyboard.
Type	`string`

`editLabel`
Description	Append 'edit' to the end of the button label (`editButtonLabel`)which allows users of assistive technologies to understand the purpose of the button
Type	`string`

`hideActionButtons`
Description	Sets whether the confirm and cancel action buttons are displayed in the bottom right of the field.
Type	`boolean`

`isCompact`
Description	Sets height of the text field to compact. The top and bottom padding is decreased.
Type	`boolean`

`isRequired`
Description	Determines whether the input value can be confirmed as empty.
Type	`boolean`

`keepEditViewOpenOnBlur`
Description	Sets the view when the element blurs and loses focus (this can happen when a user clicks away). When set to true, inline edit stays in `editView` when blurred.
Type	`boolean`

`label`
Description	Label above the input field that communicates what value should be entered.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`onCancel`
Description	Exits `editView` and switches back to `readView`. This is called when the cancel action button (x) is clicked.
Type	`() => void`

`onConfirm`
Required
Description	Calls the `editView` handler. It confirms the changes. The field value is passed as an argument to this function.
Type	`(value: string, analyticsEvent: UIAnalyticsEvent) => void`

`placeholder`
Required
Description	Text shown in `readView` when the field value is an empty string.
Type	`string`

`readViewFitContainerWidth`
Description	Determines whether the `readView` has 100% width within its container, or whether it fits the content.
Type	`boolean`

`startWithEditViewOpen`
Description	Determines whether it begins in `editView` or `readView`. When set to true, `isEditing` begins as true and the inline edit starts in `editView`.
Type	`boolean`

`testId`
Description	A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests.
Type	`string`

`validate`
Description	Displays an inline dialog with a message when the field input is invalid. This is handled by `react-final-form`.
Type	`(value: any, formState: {}, fieldState: {}) => string \| void \| Promise<string \| void>`

Was this page helpful?

We use this feedback to improve our documentation.