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

Controlled

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>
  )
}

With 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>
  )
}

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