Ark UI

Import

import {
  Editable,
  EditableArea,
  EditableCancelTrigger,
  EditableControl,
  EditableEditTrigger,
  EditableInput,
  EditableLabel,
  EditablePreview,
  EditableSubmitTrigger,
} from '@ark-ui/react'

Usage

The Editable component consists of the EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview and EditableSubmitTrigger components.

<Editable placeholder="Placeholder">
  <EditableLabel>Label</EditableLabel>
  <EditableArea>
    <EditableInput />
    <EditablePreview />
  </EditableArea>
</Editable>

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.

<Editable placeholder="Placeholder">
  {(state) => (
    <>
      <EditableLabel>Editable Label</EditableLabel>
      <EditableArea>
        <EditableInput />
        <EditablePreview />
      </EditableArea>
      <EditableControl>
        {state.isEditing ? (
          <>
            <EditableSubmitTrigger>Save</EditableSubmitTrigger>
            <EditableCancelTrigger>Cancel</EditableCancelTrigger>
          </>
        ) : (
          <EditableEditTrigger>Edit</EditableEditTrigger>
        )}
      </EditableControl>
    </>
  )}
</Editable>

Auto-resizing the editable

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

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

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 placeholder="Placeholder" autoResize maxWidth="320px">
  {/*...*/}
</Editable>

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 placeholder="Placeholder" activationMode="dblclick">
  {/*...*/}
</Editable>