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.

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

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

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 ​