Editable

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

Click to edit 'Akar'

<script setup lang="ts">
import { AEditableArea, AEditableCancelTrigger, AEditableEditTrigger, AEditableInput, AEditablePreview, AEditableRoot, AEditableSubmitTrigger } from 'akar';
</script>

<template>
  <div class="w-[250px]">
    <AEditableRoot
      v-slot="{ isEditing }"
      default-value="Click to edit 'Akar'"
      placeholder="Enter text..."
      class="flex flex-col gap-4"
      auto-resize
    >
      <AEditableArea class="color-text w-[250px]">
        <AEditablePreview />
        <AEditableInput class="w-full placeholder:color-text-muted" />
      </AEditableArea>
      <AEditableEditTrigger
        v-if="!isEditing"
        class="text-sm color-primary leading-[35px] font-medium px-[15px] outline-none border border-border rounded-lg bg-white inline-flex h-[35px] w-max shadow-sm items-center justify-center hover:bg-stone-50 focus:shadow-[0_0_0_2px] focus:shadow-black"
      />
      <div
        v-else
        class="flex gap-2"
      >
        <AEditableSubmitTrigger
          class="text-sm color-primary leading-[35px] font-medium px-[15px] outline-none border border-border rounded-lg bg-white inline-flex h-[35px] shadow-sm items-center justify-center hover:bg-stone-50 focus:shadow-[0_0_0_2px] focus:shadow-black"
        />
        <AEditableCancelTrigger
          class="text-sm text-white leading-[35px] font-medium px-[15px] outline-none border border-border rounded-lg bg-error inline-flex h-[35px] shadow-sm items-center justify-center hover:bg-error-600 focus:shadow-[0_0_0_2px] focus:shadow-black"
        />
      </div>
    </AEditableRoot>
  </div>
</template>

Features

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

Anatomy

Import all parts and piece them together.

<script setup>
import {
  AEditableArea,
  AEditableCancelTrigger,
  AEditableEditTrigger,
  AEditableInput,
  AEditablePreview,
  AEditableRoot,
  AEditableSubmitTrigger
} from 'akar';
</script>

<template>
  <AEditableRoot>
    <AEditableArea>
      <AEditablePreview />
      <AEditableInput />
    </AEditableArea>
    <AEditableEditTrigger />
    <AEditableSubmitTrigger />
    <AEditableCancelTrigger />
  </AEditableRoot>
</template>

API Reference

Root

Contains all the parts of an editable component.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`activationMode`	`'focus'`	`'dblclick' \| 'focus' \| 'none'` The activation event of the editable field
`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 `AConfigProvider` 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`
`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' \| 'both' \| 'enter'` The submit event of the editable field

Emits

Event	Type
`submit`	`[value: string \| null]`
`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	Type
`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` Event handler called when a value is submitted
`cancel`	`(): void` Function to cancel the value of the editable
`edit`	`(): void` Function to set the editable in edit mode

Area

Contains the text parts of an editable component.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| 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 Attributes

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
`as`	`'input'`	`APrimitiveAsTag \| 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 Attributes

Attribute	Value
`[data-disabled]`	Present when disabled
`[data-invalid]`	Present when invalid

Preview

Contains the preview of the editable component.

Props

Prop	Default	Type
`as`	`'span'`	`APrimitiveAsTag \| 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.

Edit Trigger

Contains the edit trigger of the editable component.

Props

Prop	Default	Type
`as`	`'button'`	`APrimitiveAsTag \| 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.

Submit Trigger

Contains the submit trigger of the editable component.

Props

Prop	Default	Type
`as`	`'button'`	`APrimitiveAsTag \| 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.

Cancel Trigger

Contains the cancel trigger of the editable component.

Props

Prop	Default	Type
`as`	`'button'`	`APrimitiveAsTag \| 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 AEditableSubmitTrigger, so we change the submit mode to none.

<template>
  <AEditableRoot submit-mode="none">
    <AEditableArea>
      <AEditablePreview />
      <AEditableInput />
    </AEditableArea>
    <AEditableEditTrigger />
    <AEditableSubmitTrigger />
    <AEditableCancelTrigger />
  </AEditableRoot>
</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.

Date Range Picker

Facilitates the selection of date ranges through an input and calendar-based interface.

Label

Renders an accessible label associated with controls.

Editable

Features

Anatomy

API Reference

Root

Props

Emits

Slots

Area

Props

Data Attributes

Input

Props

Data Attributes

Preview

Props

Edit Trigger

Props

Submit Trigger

Props

Cancel Trigger

Props

Examples

Change only on submit

Accessibility

Keyboard Interactions