Inline edit

An inline edit displays a custom input component that switches between reading and editing on the same page.

Examples Code Usage Upgrade guide Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/inline-edit`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/inline-edit, (opens new window)
Bundle	unpkg.com, (opens new window)

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`

`editView`
Required
Description	The component shown when user is editing (when the inline edit is not in `readView`).
Type	`(fieldProps: ExtendedFieldProps<FieldValue>, ref: React.RefObject<any>) => React.ReactNode`

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

`isEditing`
Description	Sets whether the component shows the `readView` or the `editView`. This is used to manage the state of the input in stateless inline edit.
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	Saves and confirms the value entered into the field. It exits `editView` and returns to `readView`.
Type	`(value: any, analyticsEvent: UIAnalyticsEvent) => void`

`onEdit`
Description	Handler called when readView is clicked.
Type	`() => void`

`readView`
Required
Description	The component shown when not in `editView`. This is when the inline edit is read-only and not being edited.
Type	`() => React.ReactNode`

`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 specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving 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.