Editable

A component that allows users to edit text in place.

Edit user

Click in the field or edit button to start editing

Installation


pnpm dlx shadcn@latest add @shark-ui/editable

Usage


import { 
  Editable,
  EditableArea,
  EditableInput,
  EditablePreview,
  EditableControl,
  EditableCancelTrigger,
  EditableSubmitTrigger,
  EditableEditTrigger,
} from "@/components/ui/editable";


<Editable defaultValue="Editable content">
  <EditableArea>
    <EditableInput />
    <EditablePreview />
  </EditableArea>
  <EditableControl>
    <EditableCancelTrigger/>
    <EditableSubmitTrigger/>
    <EditableEditTrigger/>
  </EditableControl>
</Editable>

Activation Modes

The activationMode prop controls how editing is triggered.

Focus

Editing starts when the field receives focus.

Edit with focus

Focus the field to start editing (default activation mode)

Click

Editing starts with a single click on the preview.

Edit with click

Click the text to start editing

Double-Click

Editing starts with a double-click on the preview.

Edit with double-click

Double-click the text to start editing

None

No automatic activation. Use EditableEditTrigger to manually start editing.

Edit with manual trigger

Use the edit button to start editing (no automatic activation)

Sizes

You can change the size of the editable preview using the size prop on EditablePreview.

Extra Small

Editable content

Small

Editable content

Large

Editable content

Extra Large

Editable content

Examples

With Textarea

Edit description

Double-click the text to start editing

Without Controls

Edit without control buttons. Press Enter to save, Escape to cancel.

Edit without controls

Click the field to edit, press Enter to save, Escape to cancel

Controlled

Make the entire form editable at once by using the edit prop.

You can also use the value and onValueChange props to control the editable component.

Edit user

Click the edit button to start editing

Orientation

The orientation prop controls the layout of the editable component and its controls.

Horizontal

Controls are displayed horizontally next to the editable area. This is the default.

Editable content

Vertical

Controls are displayed vertically next to the editable area. Useful for multi-line editable content.

Editable content

API Reference

Editable

Root element of the editable component. Renders a div.

Prop	Type	Default
`activationMode`	`focus \| dblclick \| click \| none`	`'focus'`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`submitMode`	`both \| enter \| blur \| none`	`'both'`
`asChild`	`boolean`	`-`
`className`	`string`	`-`

Attributes	Type	Default
`[data-mode]`	`focus \| dblclick \| click \| none`	`activationMode`
`[data-orientation]`	`horizontal \| vertical`	`orientation`
`[data-slot]`	`-`	`editable`

EditableArea

Container for the editable input and preview. Renders a div.

Prop	Type	Default
`asChild`	`boolean`	`-`
`className`	`string`	`-`

EditableInput

Input element for editing. Renders an input or custom element when using asChild.

Prop	Type	Default
`asChild`	`boolean`	`-`
`className`	`string`	`-`

Attributes	Type	Default
`[data-slot]`	`-`	`editable-input`

EditablePreview

Preview element that displays the value when not editing. Renders a span.

Prop	Type	Default
`asChild`	`boolean`	`-`
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`
`className`	`string`	`-`

Attributes	Type	Default
`[data-slot]`	`-`	`editable-preview`

EditableControl

Container for the control buttons. Renders a div.

Prop	Type	Default
`asChild`	`boolean`	`-`
`className`	`string`	`-`

EditableEditTrigger

Button that triggers edit mode. Renders a button.

Prop	Type	Default
`asChild`	`boolean`	`-`
`className`	`string`	`-`

EditableCancelTrigger

Button that cancels editing and reverts changes. Renders a button.

Prop	Type	Default
`asChild`	`boolean`	-
`className`	`string`	`-`

EditableSubmitTrigger

Button that submits the edited value. Renders a button.

Prop	Type	Default
`asChild`	`boolean`	-
`className`	`string`	`-`

For a complete list of props, see the Ark UI documentation.