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.
Import#
import { Editable } 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.Root defaultValue='Take some chakra'><Editable.Preview /><Editable.Input /></Editable.Root>
Usage with textarea#
// Click the text to edit<Editable.Root defaultValue='Take some chakra'><Editable.Preview /><Editable.Textarea /></Editable.Root>
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 Editable.Input 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 ? (<Group justifyContent='center' size='sm'><IconButton {...getSubmitButtonProps()}><CheckIcon /></IconButton><IconButton {...getCancelButtonProps()}><CloseIcon /></IconButton></Group>) : (<Flex justifyContent='center'><IconButton size='sm' {...getEditButtonProps()}><EditIcon /></IconButton></Flex>)}return (<EditabletextAlign='center'defaultValue='Rasengan ⚡️'fontSize='2xl'isPreviewFocusable={false}><Editable.Preview /><Editable.Input asChild><Input /></Editable.Input><EditableControls /></Editable>)}