Editable
Alpha<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.
<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 | 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. | |
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 |
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 | 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 | 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 | 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 | 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 | 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 | 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.
|