Editable

A component that allows users to edit text in place.

Double click to edit

Anatomy

To set up the editable correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Editable component in your project. Let’s take a look at the most basic example:

import { Editable } from '@ark-ui/react'

const Basic = () => (
  <Editable.Root placeholder="Placeholder" activationMode="dblclick">
    <Editable.Label>Label</Editable.Label>
    <Editable.Area>
      <Editable.Input />
      <Editable.Preview />
    </Editable.Area>
  </Editable.Root>
)

Using custom 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.

import { Editable } from '@ark-ui/react'

const CustomControls = () => (
  <Editable.Root placeholder="enter a value" defaultValue="Chakra">
    {(api) => (
      <>
        <Editable.Label>Label</Editable.Label>
        <Editable.Area>
          <Editable.Input />
          <Editable.Preview />
        </Editable.Area>
        <Editable.Control>
          {api.isEditing ? (
            <>
              <Editable.SubmitTrigger>Save</Editable.SubmitTrigger>
              <Editable.CancelTrigger>Cancel</Editable.CancelTrigger>
            </>
          ) : (
            <Editable.EditTrigger>Edit</Editable.EditTrigger>
          )}
        </Editable.Control>
      </>
    )}
  </Editable.Root>
)

Auto-resizing the editable

To auto-grow the editable as the content changes, set the autoResize prop to true.

<Editable.Root placeholder="Placeholder" autoResize>
  {/*...*/}
</Editable.Root>

Setting a maxWidth

It is a common pattern to set a maximum of the editable as it auto-grows. To achieve this, set the maxWidth prop to the desired value.

<Editable.Root placeholder="Placeholder" autoResize maxWidth="320px">
  {/*...*/}
</Editable.Root>

Editing with double click

The editable supports two modes of activating the “edit” state:

  • when the preview part is focused (with pointer or keyboard).
  • when the preview part is double-clicked.

To change the mode to double-click, pass the prop activationMode="dblclick".

<Editable.Root placeholder="Placeholder" activationMode="dblclick">
  {/*...*/}
</Editable.Root>

API Reference

Root

PropTypeDefault
activationMode
ActivationMode"focus"
asChild
boolean
autoResize
boolean
defaultValue
string
dir
'ltr' | 'rtl'"ltr"
disabled
boolean
finalFocusEl
() => HTMLElement | null
form
string
getRootNode
() => Node | ShadowRoot | Document
id
string
ids
Partial<{ root: string area: string label: string preview: string input: string controls: string submitTrigger: string cancelTrigger: string editTrigger: string }>
invalid
boolean
maxLength
number
name
string
onEdit
() => void
onFocusOutside
(event: FocusOutsideEvent) => void
onInteractOutside
(event: InteractOutsideEvent) => void
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
onValueChange
(details: ValueChangeDetails) => void
onValueCommit
(details: ValueChangeDetails) => void
onValueRevert
(details: ValueChangeDetails) => void
placeholder
string | { edit: string; preview: string }
readOnly
boolean
selectOnFocus
boolean
startWithEditView
boolean
submitMode
SubmitMode"enter"
translations
IntlTranslations
value
string

Area

PropTypeDefault
asChild
boolean

Input

PropTypeDefault
asChild
boolean

Label

PropTypeDefault
asChild
boolean

Control

PropTypeDefault
asChild
boolean

Preview

PropTypeDefault
asChild
boolean

EditTrigger

PropTypeDefault
asChild
boolean

CancelTrigger

PropTypeDefault
asChild
boolean

SubmitTrigger

PropTypeDefault
asChild
boolean