@chakra-ui/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.
Installation
yarn add @chakra-ui/editable
# or
npm i @chakra-ui/editableImport component
import { Editable, EditableInput, EditablePreview } from "@chakra-ui/react"Usage
<Editable defaultValue="Take some chakra">
<EditablePreview />
<EditableInput />
</Editable>