Editable

Alpha

Displays an input field used for editing a single line of text, rendering as static text on load. It transforms into a text input field when the edit interaction is triggered.

View code

Click to edit 'Reka UI'

Features

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

Installation

Install the component from your command line.

$ npm add reka-ui

Anatomy

Import all parts and piece them together.

vue

<script setup>
import {
  EditableArea,
  EditableCancelTrigger,
  EditableEditTrigger,
  EditableInput,
  EditablePreview,
  EditableRoot,
  EditableSubmitTrigger
} from 'reka-ui'
</script>

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

API Reference

Root

Contains all the parts of an editable component.

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

Emit	Payload
`submit`	`[value: string]` 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 (default)	Payload
`isEditing`	`boolean` Whether the editable field is in edit mode
`modelValue`	`string \| undefined` The value of the editable field
`isEmpty`	`boolean` Whether the editable field is empty
`submit`	Function to submit the value of the editable
`cancel`	Function to cancel the value of the editable
`edit`	Function to set the editable in edit mode

Methods	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

Area

Contains the text parts of an editable component.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwrite 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

Input

Contains the input of an editable component.

Prop	Default	Type
`as`	`'input'`	`AsTag \| Component` The element or component this component should render as. Can be overwrite 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

Preview

Contains the preview of the editable component.

Prop	Default	Type
`as`	`'span'`	`AsTag \| Component` The element or component this component should render as. Can be overwrite 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.

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwrite 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.

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwrite 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.

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwrite 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.

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.

Editable ​

Features ​

Installation ​

Anatomy ​

API Reference ​

Root ​

Area ​

Input ​

Preview ​

Edit Trigger ​

Submit Trigger ​

Cancel Trigger ​

Accessibility ​

Keyboard Interactions ​