Editable

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.

Area

Contains the text parts of an editable component.

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.

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

Preview

Contains the preview of the editable component.

Edit Trigger

Contains the edit trigger of the editable component.

Submit Trigger

Contains the submit trigger of the editable component.

Cancel Trigger

Contains the cancel trigger of the editable component.

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

Examples ​

Change only on submit ​

Accessibility ​

Keyboard Interactions ​