---
title: Editable
description: Used for inline renaming of some text.
links:
  source: components/editable
  storybook: components-editable--basic
  recipe: editable
  ark: https://ark-ui.com/react/docs/components/editable
---

<ExampleTabs name="editable-basic" />

## Usage

```jsx
import { Editable } from "@chakra-ui/react"
```

```jsx
<Editable.Root>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

## Examples

### Double Click

Use the `activationMode` prop to make the content editable when users double
click.

<ExampleTabs name="editable-with-double-click" />

### Disabled

Use the `disabled` prop to disable the editable component.

<ExampleTabs name="editable-disabled" />

### Textarea

You can make a text area editable.

<ExampleTabs name="editable-with-textarea" />

### With Controls

Add controls such as "edit", "cancel" and "submit" to `Editable` for better user
experience.

<ExampleTabs name="editable-with-controls" />

### Controlled

Use the `value` and `onValueChange` props to control the editable component.

<ExampleTabs name="editable-controlled" />

### Store

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" />

## Props

### Root

<PropTable component="Editable" part="Root" />
