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

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.

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

Usage with textarea#

// Click the text to edit
<Editable defaultValue='Take some chakra'>
  <EditablePreview />
  <EditableTextarea />
</Editable>

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.

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 />
      {/* Here is the custom input */}
      <Input as={EditableInput} />
      <EditableControls />
    </Editable>
  )
}

Styling the editable#

Please see the recipe for a styled example.

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by ▲ Vercel