Editable

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

Click to edit 'Reka UI'

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

@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.

pnpm add akar

yarn add akar

npm install akar

bun add akar

Anatomy

Import all parts and piece them together.

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

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

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

Event	Payload
`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

Slot (default)	Payload
`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

Method	Type
`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

Prop	Default	Type
`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. Read our Composition guide for more details.

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

Prop	Default	Type
`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. Read our Composition guide for more details.

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

Prop	Default	Type
`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. Read our Composition guide for more details.

Prop	Default	Type
`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. Read our Composition guide for more details.

Prop	Default	Type
`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. Read our Composition guide for more details.

Prop	Default	Type
`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. Read our Composition guide for more details.

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.

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

Accessibility

Keyboard Interactions

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

Dropdown Menu

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

Field

Accessible wiring between a label, control, description, and error message, with built-in validation.

Editable

Features

Installation

Anatomy

API Reference

Root

Area

Input

Preview

Edit Trigger

Submit Trigger

Cancel Trigger

Examples

Change only on submit

Accessibility

Keyboard Interactions