Editable | Ark UI

Framework

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

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

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

<script setup lang="ts">
import { ref } from 'vue'
import { Editable } from '@ark-ui/vue'
const value = ref('Chakra')
</script>

<template>
  <Editable.Root placeholder="Placeholder" activationMode="dblclick">
    <Editable.Label>Label</Editable.Label>
    <Editable.Area>
      <Editable.Input />
      <Editable.Preview />
    </Editable.Area>
  </Editable.Root>
</template>

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

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

const CustomControls = () => (
  <Editable.Root placeholder="enter a value" value="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>Canvel</Editable.CancelTrigger>
            </>
          ) : (
            <Editable.EditTrigger>Edit</Editable.EditTrigger>
          )}
        </Editable.Control>
      </>
    )}
  </Editable.Root>
)

<script setup lang="ts">
import { ref } from 'vue'
import { Editable } from '@ark-ui/vue'
const value = ref('Chakra')
</script>

<template>
  <Editable.Root placeholder="enter a value" v-model="value" v-slot="{ isEditing }">
    <Editable.Label>Label</Editable.Label>
    <Editable.Area>
      <Editable.Input />
      <Editable.Preview />
    </Editable.Area>
    <Editable.Control v-if="isEditing">
      <Editable.SubmitTrigger>Save</Editable.SubmitTrigger>
      <Editable.CancelTrigger>Cancel</Editable.CancelTrigger>
    </Editable.Control>
    <Editable.Control v-else>
      <Editable.EditTrigger>Edit</Editable.EditTrigger>
    </Editable.Control>
  </Editable.Root>
</template>

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

Prop	Type	Default
`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

Prop	Type	Default
`asChild`	`boolean`

Input

Prop	Type	Default
`asChild`	`boolean`

Label

Prop	Type	Default
`asChild`	`boolean`

Control

Prop	Type	Default
`asChild`	`boolean`

Preview

Prop	Type	Default
`asChild`	`boolean`

EditTrigger

Prop	Type	Default
`asChild`	`boolean`

CancelTrigger

Prop	Type	Default
`asChild`	`boolean`

SubmitTrigger

Prop	Type	Default
`asChild`	`boolean`