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.

    SourceTheme Source@chakra-ui/editable

Props#

Editable Props#

defaultValue

Description

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

Type
string

finalFocusRef

Description

The ref of element to receive focus when the modal closes.

Type
RefObject<FocusableElement>

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

onBlur

Description

Callback invoked when the user either submits or cancels. It provides the last confirmed value as argument.

Type
(nextValue: string) => void

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

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
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel