Sponsor

Editable

Editable Text 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 on or focuses it.

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

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.
EditablePreview: The read-only view of the component.

import { Editable, EditableInput, EditablePreview } from "@chakra-ui/react"

import { Editable, EditableInput, EditablePreview } from "@chakra-ui/react"

Usage#

Take some chakra

// Click the text to edit
<Editable defaultValue="Take some chakra">
  <EditablePreview />
  <EditableInput />
</Editable>

// Click the text to edit
<Editable defaultValue="Take some chakra">
  <EditablePreview />
  <EditableInput />
</Editable>

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 state of the component.

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

Rasengan ⚡️

function CustomControlsExample() {
  /* Here's a custom control */
  function EditableControls({ isEditing, onSubmit, onCancel, onEdit }) {
    return isEditing ? (
      <ButtonGroup justifyContent="center" size="sm">
        <IconButton icon={<CheckIcon />} onClick={onSubmit} />
        <IconButton icon={<CloseIcon />} onClick={onCancel} />
      </ButtonGroup>
    ) : (
      <Flex justifyContent="center">
        <IconButton size="sm" icon={<EditIcon />} onClick={onEdit} />
      </Flex>
    )
  }

  return (
    <Editable
      textAlign="center"
      defaultValue="Rasengan ⚡️"
      fontSize="2xl"
      isPreviewFocusable={false}
      submitOnBlur={false}
    >
      {(props) => (
        <>
          <EditablePreview />
          <EditableInput />
          <EditableControls {...props} />
        </>
      )}
    </Editable>
  )
}

function CustomControlsExample() {
  /* Here's a custom control */
  function EditableControls({ isEditing, onSubmit, onCancel, onEdit }) {
    return isEditing ? (
      <ButtonGroup justifyContent="center" size="sm">
        <IconButton icon={<CheckIcon />} onClick={onSubmit} />
        <IconButton icon={<CloseIcon />} onClick={onCancel} />
      </ButtonGroup>
    ) : (
      <Flex justifyContent="center">
        <IconButton size="sm" icon={<EditIcon />} onClick={onEdit} />
      </Flex>
    )
  }
  return (
    <Editable
      textAlign="center"
      defaultValue="Rasengan ⚡️"
      fontSize="2xl"
      isPreviewFocusable={false}
      submitOnBlur={false}
    >
      {(props) => (
        <>
          <EditablePreview />
          <EditableInput />
          <EditableControls {...props} />
        </>
      )}
    </Editable>
  )
}

Editable Example

Props#

Editable Props#

Name	Type	Description	Default
colorScheme	`string`		-
defaultValue	`string`	The initial value of the Editable in both edit & preview mode	-
isDisabled	`boolean`	If `true`, the Editable will be disabled.	-
isPreviewFocusable	`boolean`	If `true`, the read only view, has a `tabIndex` set to `0` so it can recieve focus via the keyboard or click.	`true`
onCancel	`((previousValue: string) => void)`	Callback invoked when user cancels input with the `Esc` key. It provides the last confirmed value as argument.	-
onChange	`((nextValue: string) => void)`	Callback invoked when user changes input.	-
onEdit	`(() => void)`	Callback invoked once the user enters edit mode.	-
onSubmit	`((nextValue: string) => void)`	Callback invoked when user confirms value with `enter` key or by blurring input.	-
orientation	`"horizontal" \| "vertical"`		-
placeholder	`string`	The placeholder text when the value is empty.	-
selectAllOnFocus	`boolean`	If `true`, the input's text will be highlighted on focus.	`true`
size	`string`		-
startWithEditView	`boolean`	If `true`, the Editable will start with edit mode by default.	-
styleConfig	`Record<string, any>`		-
submitOnBlur	`boolean`	If `true`, it'll update the value onBlur and turn off the edit mode.	`true`
value	`string`	The value of the Editable in both edit & preview mode	-
variant	`string`		-

Edit this page