Dice UI

Fruit

Click to edit

Installation

pnpm dlx shadcn@latest add @diceui/editable

Layout

Import the parts, and compose them together.

import {
  Editable,
  EditableLabel,
  EditableArea,
  EditablePreview,
  EditableInput,
  EditableTrigger,
  EditableToolbar,
  EditableSubmit,
  EditableCancel,
} from "@/components/ui/editable";
 
return (
  <Editable>
    <EditableLabel />
    <EditableArea>
      <EditablePreview />
      <EditableInput />
      <EditableTrigger />
    </EditableArea>
    <EditableTrigger />
    <EditableToolbar>
      <EditableSubmit />
      <EditableCancel />
    </EditableToolbar>
  </Editable>
)

Examples

With Double Click

Trigger edit mode with double click instead of single click.

Fruit

Double click to edit

With Autosize

Input that automatically resizes based on content.

Autosize editable

Adjust the size of the input with the text inside.

Todo List

Tricks to learn

Ollie

Kickflip

360 flip

540 flip

With Form

Control the editable component in a form.

API Reference

Editable

The main container component for editable functionality.

Prop

Type

EditableLabel

The label component for the editable field.

Prop

Type

Data Attribute	Value
`[data-disabled]`	Present when the editable field is disabled
`[data-invalid]`	Present when the editable field is invalid
`[data-required]`	Present when the editable field is required

EditableArea

Container for the preview and input components.

Prop

Type

Data Attribute	Value
`[data-disabled]`	Present when the editable field is disabled
`[data-editing]`	Present when the field is in edit mode

EditablePreview

The preview component that displays the current value.

Prop

Type

Data Attribute	Value
`[data-empty]`	Present when the field has no value
`[data-disabled]`	Present when the editable field is disabled
`[data-readonly]`	Present when the field is read-only

EditableInput

The input component for editing the value.

Prop

Type

EditableTrigger

Button to trigger edit mode.

Prop

Type

Data Attribute	Value
`[data-disabled]`	Present when the editable field is disabled
`[data-readonly]`	Present when the field is read-only

EditableToolbar

Container for action buttons.

Prop

Type

EditableSubmit

Button to submit changes.

Prop

Type

EditableCancel

Button to cancel changes.

Prop

Type

Accessibility

Keyboard Interactions

Key	Description
`Enter`	Submits the current value when in edit mode.
`Escape`	Cancels editing and reverts to the previous value.
`Tab`	Moves focus to the next focusable element.

Editable

On this page