React component used to build inline-editable components

Usage no npm install needed!

<script type="module">
  import chakraUiEditable from 'https://cdn.skypack.dev/@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.


yarn add @chakra-ui/editable

# or

npm i @chakra-ui/editable

Import component

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


<Editable defaultValue="Take some chakra">
  <EditablePreview />
  <EditableInput />