Skip to content

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.
Click to edit 'Radix Vue'
vue
<script setup lang="ts">
import { EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger } from 'radix-vue'
</script>

<template>
  <div class="w-[250px]">
    <EditableRoot
      v-slot="{ isEditing }"
      default-value="Click to edit 'Radix Vue'"
      placeholder="Enter text..."
      class="flex flex-col gap-4"
      auto-resize
    >
      <EditableArea class="text-white w-[250px]">
        <EditablePreview />
        <EditableInput class="w-full placeholder:text-white" />
      </EditableArea>
      <EditableEditTrigger
        v-if="!isEditing"
        class="w-max inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-white text-green11 shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black"
      />
      <div
        v-else
        class="flex gap-4"
      >
        <EditableSubmitTrigger
          class="inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-white text-green11 shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black"
        />
        <EditableCancelTrigger
          class="inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-red9 text-white shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-red10 focus:shadow-[0_0_0_2px] focus:shadow-black"
        />
      </div>
    </EditableRoot>
  </div>
</template>

Features

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

Installation

Install the component from your command line.

sh
$ npm add radix-vue

Anatomy

Import all parts and piece them together.

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

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

API Reference

Root

Contains all the parts of an editable component.

PropDefaultType
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

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

EmitPayload
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

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

PropDefaultType
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 AttributeValue
[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

Input

Contains the input of an editable component.

PropDefaultType
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 AttributeValue
[data-readonly]Present when readonly
[data-disabled]Present when disabled

Preview

Contains the preview of the editable component.

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

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

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

PropDefaultType
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

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