Editable Text

EditableText is used for inline renaming of some text. It appears as normal UI text but transforms into a text input field when the user clicks or focuses on it.

The text input inherits all font styling from its parent, to make the edit and read view transition seamless.


Chakra UI exports 3 components to handle this functionality.

  • Editable: The wrapper component that providers context value.
  • EditableInput: The edit view of the component. It shows when you click or focus on the text.
  • EditablePreview: The read-only view of the component.


Take some chakra
Editable Example

With custom controls#

In some cases, you might need to use custom controls to toggle the edit and read mode. We use the render prop pattern to provide access to the internal states of the component.

Ensure you set isPreviewFocusable and submitOnBlur to true for this to work.

Rasengan ⚡️
Editable Example


Editable Props#

Editable component composes the Box component so can pass all Box props. Here are the custom props:

valuestringText value of the controlled input
defaultValuestringThe initial value of the Editable in both edit & preview mode
placeholderstring"Click to edit..."The placeholder text when the value is empty.
isDisabledstringIf true, the Editable will be disabled.
onChangefuncCallback invoked when user changes input.
onCancelstringCallback invoked when user cancels input with the Esc key. It provides the last confirmed value as argument.
onSubmitstringCallback invoked when user confirms value with enter key or by blurring the input.
onEditstringCallback invoked once the user enters edit mode.
isPreviewFocusablebooleantrueIf true, the read only view, has a tabIndex set to 0 so it can receive focus via the keyboard or click.
startWithEditViewbooleanIf true, the Editable will start with edit mode by default.
submitOnBlurbooleantrueIf true, it'll update the value onBlur and turn off the edit mode.
selectAllOnFocusbooleantrueIf true, the input's text will be highlighted on focus.
childrenReact.ReactNodeThe content of the EditableText. Ideally only EditablePreview and EditableInput should be the children but you add other elements too

EditableInput Props#

EditableInput composes PseudoBox so you can pass all PseudoBox props.

EditablePreview Props#

EditablePreview composes PseudoBox so you can pass all PseudoBox props.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo