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.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

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"

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.

Rasengan ⚡️

function CustomControlsExample() {
  /* Here's a custom control */
  function EditableControls() {
    const {
      isEditing,
      getSubmitButtonProps,
      getCancelButtonProps,
      getEditButtonProps,
    } = useEditableControls()

    return isEditing ? (
      <ButtonGroup justifyContent="center" size="sm">
        <IconButton icon={<CheckIcon />} {...getSubmitButtonProps()} />
        <IconButton icon={<CloseIcon />} {...getCancelButtonProps()} />
      </ButtonGroup>
    ) : (
      <Flex justifyContent="center">
        <IconButton size="sm" icon={<EditIcon />} {...getEditButtonProps()} />
      </Flex>
    )
  }

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

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

Editable 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

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`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 recieve 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

Edit this page