---
title: "Editable"
description: "Displays an input field used for editing a single line of text, rendering as static text on load."
canonical_url: "https://vinicunca.dev/akar/components/editable"
---
# Editable

> Displays an input field used for editing a single line of text, rendering as static text on load.

```vue [index.vue]
<script setup lang="ts">
import { EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger } from 'akar'
import './styles.css'
</script>

<template>
  <div class="akar-demo akar-demo-Editable">
    <div style="width: 250px;">
        <EditableRoot
          v-slot="{ isEditing }"
          placeholder="Enter text..."
          class="EditableRoot"
          default-value="Click to edit 'Reka UI'"
          auto-resize
        >
          <EditableArea class="EditableArea">
            <EditablePreview />
            <EditableInput />
          </EditableArea>
          <EditableEditTrigger
            v-if="!isEditing"
            class="EditableTrigger"
          />
          <div
            v-else
            class="EditableWrapper"
          >
            <EditableSubmitTrigger
              class="EditableSubmitTrigger"
            />
            <EditableCancelTrigger
              class="EditableTrigger"
            />
          </div>
        </EditableRoot>
      </div>
  </div>
</template>
```

```css [styles.css]
@scope (.akar-demo-Editable) {
.EditableRoot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.EditableArea {
  color: var(--white);
  width: 250px;
}

.EditableWrapper {
  display: flex;
  gap: 1rem;
}

.EditableSubmitTrigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.9375rem 1.25rem;
  height: 2.1875rem;
  background-color: var(--grass8);
  color: var(--white);
  box-shadow: 0px 2px 1.25rem rgba(0, 0, 0, 0.07), 0px 2px 1.25rem rgba(0, 0, 0, 0.07);
  outline: none;
  transition: background-color 0.2s, box-shadow 0.2s;
}


.EditableTrigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.9375rem 1.25rem;
  height: 2.1875rem;
  background-color: var(--white);
  color: var(--grass11);
  box-shadow: 0px 2px 1.25rem rgba(0, 0, 0, 0.07), 0px 2px 1.25rem rgba(0, 0, 0, 0.07);
  outline: none;
  transition: background-color 0.2s, box-shadow 0.2s;
}
}
```

## Features

- Full keyboard navigation
- Can be controlled or uncontrolled
- Focus is fully managed

## Installation

Install the component from your command line.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

## Anatomy

Import all parts and piece them together.

```vue
<script setup>
import {
  EditableArea,
  EditableCancelTrigger,
  EditableEditTrigger,
  EditableInput,
  EditablePreview,
  EditableRoot,
  EditableSubmitTrigger
} from 'akar';
</script>

<template>
  <EditableRoot>
    <EditableArea>
      <EditablePreview />
      <EditableInput />
    </EditableArea>
    <EditableEditTrigger />
    <EditableSubmitTrigger />
    <EditableCancelTrigger />
  </EditableRoot>
</template>
```

## API Reference

### Root

Contains all the parts of an editable component.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `activationMode` | `"focus"` | `"dblclick" \| "focus" \| "none"` | The activation event of the editable field |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |
| `autoResize` | `false` | `boolean` | Whether the editable field should auto resize |
| `defaultValue` |  | `string` | The default value of the editable field |
| `dir` |  | `"ltr" \| "rtl"` | The reading direction of the calendar when applicable.<br><br>If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. |
| `disabled` | `false` | `boolean` | Whether the editable field is disabled |
| `id` |  | `string` | The id of the field |
| `maxLength` |  | `number` | The maximum number of characters allowed |
| `modelValue` |  | `string \| null` | The value of the editable field |
| `name` |  | `string` | The name of the field. Submitted with its owning form as part of a name/value pair. |
| `placeholder` | `"Enter text..."` | `string \| { edit: string; preview: string; }` | The placeholder for the editable field |
| `readonly` |  | `boolean` | Whether the editable field is read-only |
| `required` | `false` | `boolean` | When `true`, indicates that the user must set the value before the owning form can be submitted. |
| `selectOnFocus` | `false` | `boolean` | Whether to select the text in the input when it is focused. |
| `startWithEditMode` |  | `boolean` | Whether to start with the edit mode active |
| `submitMode` | `"blur"` | `"blur" \| "none" \| "enter" \| "both"` | The submit event of the editable field |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `submit` | `value: string \| null` | Event handler called when a value is submitted |
| `update:modelValue` | `value: string` | Event handler called whenever the model value changes |
| `update:state` | `state: "cancel" \| "submit" \| "edit"` | Event handler called when the editable field changes state |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `isEditing` | `boolean` | Whether the editable field is in edit mode |
| `modelValue` | `string \| null` | The value of the editable field |
| `isEmpty` | `boolean` | Whether the editable field is empty |
| `submit` | `(): void` | Function to submit the value of the editable |
| `cancel` | `(): void` | Function to cancel the value of the editable |
| `edit` | `(): void` | Function to set the editable in edit mode |

**Methods**

| Method | Type | Description |
| --- | --- | --- |
| `submit` | `() => void` | Function to submit the value of the editable |
| `cancel` | `() => void` | Function to cancel the value of the editable |
| `edit` | `() => void` | Function to set the editable in edit mode |

[EditableRoot.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Editable/EditableRoot.vue)

### Area

Contains the text parts of an editable component.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[EditableArea.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Editable/EditableArea.vue)

| Data attribute | Value |
| --- | --- |
| `[data-readonly]` | Present when readonly |
| `[data-disabled]` | Present when disabled |
| `[data-placeholder-shown]` | Present when preview is shown |
| `[data-empty]` | Present when the input is empty |
| `[data-focus]` | Present when the editable field is focused. To be deprecated in favor of [data-focused] |
| `[data-focused]` | Present when the editable field is focused |

### Input

Contains the input of an editable component.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"input"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[EditableInput.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Editable/EditableInput.vue)

| Data attribute | Value |
| --- | --- |
| `[data-readonly]` | Present when readonly |
| `[data-disabled]` | Present when disabled |

### Preview

Contains the preview of the editable component.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"span"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[EditablePreview.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Editable/EditablePreview.vue)

### Edit Trigger

Contains the edit trigger of the editable component.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"button"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[EditableEditTrigger.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Editable/EditableEditTrigger.vue)

### Submit Trigger

Contains the submit trigger of the editable component.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"button"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[EditableSubmitTrigger.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Editable/EditableSubmitTrigger.vue)

### Cancel Trigger

Contains the cancel trigger of the editable component.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"button"` | `AsTag \| Component` | The element or component this component should render as. Can be overwritten by `asChild`. |
| `asChild` |  | `boolean` | Change the default rendered element for the one passed as a child, merging their props and behavior.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[EditableCancelTrigger.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Editable/EditableCancelTrigger.vue)

## Examples

### Change only on submit

By default the component will submit when `blur` event triggers. We can modify the `submit-mode` prop to alter this behavior.
In this case, we want to submit only when user click on `EditableSubmitTrigger`, so we change the submit mode to `none`.

```vue
<template>
  <EditableRoot submit-mode="none">
    <EditableArea>
      <EditablePreview />
      <EditableInput />
    </EditableArea>
    <EditableEditTrigger />
    <EditableSubmitTrigger />
    <EditableCancelTrigger />
  </EditableRoot>
</template>
```

## Accessibility

### Keyboard Interactions

| Key | Description |
| --- | --- |
| <kbd>Tab</kbd> | When focus moves onto the editable field, switches into the editable mode if the `activation-mode` is set to focus. |
| <kbd>Enter</kbd> |  If the `submit-mode` is set to `enter` or `both`, it submits the changes.  |
| <kbd>Escape</kbd> | When the focus is on the editable field, it cancels the changes. |

---

- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Editable)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.