Skip to main content

Editable

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.

Import

Chakra UI exports 3 components to handle this functionality.

  • Editable: The wrapper component that provides context value.
  • EditableInput: The edit view of the component. It shows when you click or focus on the text.
  • EditableTextarea: Use the textarea element to handle multi line text input in an editable context.
  • EditablePreview: The read-only view of the component.
import {
Editable,
EditableInput,
EditableTextarea,
EditablePreview,
} from '@chakra-ui/react';

Usage

The editable's text input and preview inherits all font styling from the root Editable container in order to make the edit and read view transition seamless.

Usage with textarea

With custom input and 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 state of the component. You may want to customize the EditableInput as well. This can be achieved by using a custom Input component in the as prop.

Styling the editable

Please see the recipe for a styled example.

Props

Editable Props

colorScheme

Description

Color Schemes for Editable are not implemented in the default theme. You can extend the theme to implement them.

Type
string

defaultValue

Description

The initial value of the Editable in both edit & preview mode

Type
string

isDisabled

Description

If true, the Editable will be disabled.

Type
boolean

isPreviewFocusable

Description

If true, the read only view, has a tabIndex set to 0 so it can receive focus via the keyboard or click.

Type
boolean
Default
true

onCancel

Description

Callback invoked when user cancels input with the Esc key. It provides the last confirmed value as argument.

Type
((previousValue: string) => void)

onChange

Description

Callback invoked when user changes input.

Type
((nextValue: string) => void)

onEdit

Description

Callback invoked once the user enters edit mode.

Type
(() => void)

onSubmit

Description

Callback invoked when user confirms value with enter key or by blurring input.

Type
((nextValue: string) => void)

placeholder

Description

The placeholder text when the value is empty.

Type
string

selectAllOnFocus

Description

If true, the input's text will be highlighted on focus.

Type
boolean
Default
true

size

Description

Sizes for Editable are not implemented in the default theme. You can extend the theme to implement them.

Type
string

startWithEditView

Description

If true, the Editable will start with edit mode by default.

Type
boolean

submitOnBlur

Description

If true, it'll update the value onBlur and turn off the edit mode.

Type
boolean
Default
true

value

Description

The value of the Editable in both edit & preview mode

Type
string

variant

Description

Variants for Editable are not implemented in the default theme. You can extend the theme to implement them.

Type
string