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-partattribute 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'
export 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'
export 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 { Editable } from '@ark-ui/vue'
</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.
Story not foundStory not foundStory not foundAuto-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 |
|---|---|---|
activationModeThe activation mode for the preview element.
- "focus" - Enter edit mode when the preview element is focused
- "dblclick" - Enter edit mode when the preview element is double-clicked
- "none" - No interaction with the preview element will trigger edit mode. | ActivationMode | "focus" |
asChildRender as a different element type. | boolean | |
autoResizeWhether the editable should auto-resize to fit the content. | boolean | |
defaultValueThe initial value of the editable when it is first rendered.
Use when you do not need to control the state of the editable. | string | |
disabledWhether the editable is disabled | boolean | |
finalFocusElThe element that should receive focus when the editable is closed.
By default, it will focus on the trigger element. | () => HTMLElement | null | |
formThe associate form of the underlying input. | string | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements in the editable. Useful for composition. | Partial<{
root: string
area: string
label: string
preview: string
input: string
controls: string
submitTrigger: string
cancelTrigger: string
editTrigger: string
}> | |
invalidWhether the input's value is invalid. | boolean | |
maxLengthThe maximum number of characters allowed in the editable | number | |
nameThe name attribute of the editable component. Used for form submission. | string | |
onEditThe callback that is called when in the edit mode. | () => void | |
onFocusOutsideFunction called when the focus is moved outside the component | (event: FocusOutsideEvent) => void | |
onInteractOutsideFunction called when an interaction happens outside the component | (event: InteractOutsideEvent) => void | |
onPointerDownOutsideFunction called when the pointer is pressed down outside the component | (event: PointerDownOutsideEvent) => void | |
onValueChangeThe callback that is called when the editable's value is changed | (details: ValueChangeDetails) => void | |
onValueCommitThe callback that is called when the editable's value is submitted. | (details: ValueChangeDetails) => void | |
onValueRevertThe callback that is called when the esc key is pressed or the cancel button is clicked | (details: ValueChangeDetails) => void | |
placeholderThe placeholder value to show when the `value` is empty | string | { edit: string; preview: string } | |
readOnlyWhether the editable is readonly | boolean | |
selectOnFocusWhether to select the text in the input when it is focused. | boolean | |
startWithEditViewWhether to start with the edit mode active. | boolean | |
submitModeThe 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 | SubmitMode | "enter" |
translationsSpecifies the localized strings that identifies the accessibility elements and their states | IntlTranslations | |
valueThe value of the editable in both edit and preview mode | string |
Area
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
CancelTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Control
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
EditTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Input
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Label
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Preview
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
SubmitTrigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Previous
DialogNext
File Upload