apps/www/content/docs/components/editable.mdx
import { Editable } from "@chakra-ui/react"
<Editable.Root>
<Editable.Preview />
<Editable.Input />
</Editable.Root>
Use the activationMode prop to make the content editable when users double
click.
Use the disabled prop to disable the editable component.
You can make a text area editable.
<ExampleTabs name="editable-with-textarea" />Add controls such as "edit", "cancel" and "submit" to Editable for better user
experience.
Use the value and onValueChange props to control the editable component.
An alternative way to control the editable component is to use the
RootProvider component and the useEditable store hook.
This way you can access the editable state and methods from outside the editable.
<ExampleTabs name="editable-with-store" />Explore the Editable component parts interactively. Click on parts in the
sidebar to highlight them in the preview.