Editable

Used for inline renaming of some text.

Click to edit

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

export const EditableBasic = () => (
  <Editable.Root textAlign="start" defaultValue="Click to edit">
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>
)

Usage

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

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

Examples

Double Click

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

Double click to edit

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

export const EditableWithDoubleClick = () => (
  <Editable.Root defaultValue="Double click to edit" activationMode="dblclick">
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>
)

Disabled

Use the disabled prop to disable the editable component.

Click to edit

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

const Demo = () => {
  return (
    <Editable.Root disabled defaultValue="Click to edit">
      <Editable.Preview opacity={0.5} cursor="not-allowed" />
      <Editable.Input />
    </Editable.Root>
  )
}

Textarea

You can make a text area editable.

Click to edit

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

const Demo = () => {
  return (
    <Editable.Root defaultValue="Click to edit">
      <Editable.Preview minH="48px" alignItems="flex-start" width="full" />
      <Editable.Textarea />
    </Editable.Root>
  )
}

With Controls

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

Click to edit

import { Editable, IconButton } from "@chakra-ui/react"
import { LuCheck, LuPencilLine, LuX } from "react-icons/lu"

const Demo = () => {
  return (
    <Editable.Root defaultValue="Click to edit">
      <Editable.Preview />
      <Editable.Input />
      <Editable.Control>
        <Editable.EditTrigger asChild>
          <IconButton variant="ghost" size="xs">
            <LuPencilLine />
          </IconButton>
        </Editable.EditTrigger>
        <Editable.CancelTrigger asChild>
          <IconButton variant="outline" size="xs">
            <LuX />
          </IconButton>
        </Editable.CancelTrigger>
        <Editable.SubmitTrigger asChild>
          <IconButton variant="outline" size="xs">
            <LuCheck />
          </IconButton>
        </Editable.SubmitTrigger>
      </Editable.Control>
    </Editable.Root>
  )
}

Controlled

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

Click to edit

"use client"

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

const Demo = () => {
  const [name, setName] = useState("")
  return (
    <Editable.Root
      value={name}
      onValueChange={(e) => setName(e.value)}
      placeholder="Click to edit"
    >
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  )
}

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.

Click to edit

not editing

"use client"

import { Code, Editable, Stack, useEditable } from "@chakra-ui/react"

const Demo = () => {
  const editable = useEditable({
    defaultValue: "Click to edit",
  })

  return (
    <Stack align="flex-start">
      <Editable.RootProvider value={editable}>
        <Editable.Preview />
        <Editable.Input />
      </Editable.RootProvider>
      <Code>{editable.editing ? "editing" : "not editing"}</Code>
    </Stack>
  )
}

Props

Root

Prop	Default	Type
`activationMode`	`'\'focus\''`	`ActivationMode` The activation mode for the preview element. - "focus" - Enter edit mode when the preview is focused - "dblclick" - Enter edit mode when the preview is double-clicked - "click" - Enter edit mode when the preview is clicked
`selectOnFocus`	`true`	`boolean` Whether to select the text in the input when it is focused.
`submitMode`	`'\'both\''`	`SubmitMode` The action that triggers submit in the edit mode: - "enter" - Trigger submit when the enter key is pressed - "blur" - Trigger submit when the editable is blurred - "none" - No action will trigger submit. You need to use the submit button - "both" - Pressing `Enter` and blurring the input will trigger submit
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`autoResize`		`boolean` Whether the editable should auto-resize to fit the content.
`defaultEdit`		`boolean` The initial edit state of the editable when it is first rendered. Use when you do not need to control its edit state.
`defaultValue`		`string` The initial value of the editable when it is first rendered. Use when you do not need to control the state of the editable.
`disabled`		`boolean` Whether the editable is disabled
`edit`		`boolean` Whether the editable is in edit mode.
`finalFocusEl`		`() => HTMLElement \| null` The element that should receive focus when the editable is closed. By default, it will focus on the trigger element.
`form`		`string` The associate form of the underlying input.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string area: string label: string preview: string input: string control: string submitTrigger: string cancelTrigger: string editTrigger: string }>` The ids of the elements in the editable. Useful for composition.
`invalid`		`boolean` Whether the input's value is invalid.
`maxLength`		`number` The maximum number of characters allowed in the editable
`name`		`string` The name attribute of the editable component. Used for form submission.
`onEditChange`		`(details: EditChangeDetails) => void` The callback that is called when the edit mode is changed
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`		`(details: ValueChangeDetails) => void` The callback that is called when the editable's value is changed
`onValueCommit`		`(details: ValueChangeDetails) => void` The callback that is called when the editable's value is submitted.
`onValueRevert`		`(details: ValueChangeDetails) => void` The callback that is called when the esc key is pressed or the cancel button is clicked
`placeholder`		`string \| { edit: string; preview: string }` The placeholder value to show when the `value` is empty
`readOnly`		`boolean` Whether the editable is readonly
`required`		`boolean` Whether the editable is required
`translations`		`IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`		`string` The value of the editable in both edit and preview mode

Drawer

Empty State

Editable

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Usage

Usage