Sections

Components

Utilities

Forms

Hooks

useIsMobile

Editable

Copy Markdown

Allows user to edit text in-place.

Docs API

PreviewCode

Edit user

Click in the field or edit button to start editing

Name

Vinicius Vicentini

Username

@vinihvc

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/editable

Anatomy#

Editable
├── EditableArea
│ ├── EditablePreview
│ └── EditableInput
└── EditableControl
    ├── EditableEditTrigger
    ├── EditableCancelTrigger
    └── EditableSubmitTrigger

Usage#

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

<Editable>
  <EditableArea>
    <EditableInput />
    <EditablePreview />
  </EditableArea>
  <EditableControl>
    <EditableCancelTrigger/>
    <EditableSubmitTrigger/>
    <EditableEditTrigger/>
  </EditableControl>
</Editable>

Controlled#

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

The value and onValueChange props control the editable component programmatically.

PreviewCode

Edit user

Click the edit button to start editing

Edit

Name

Vinicius Vicentini

Username

@vinihvc

Modes#

The activationMode prop controls how editing is triggered.

Focus#

Editing starts when the field receives focus.

PreviewCode

Edit with focus

Focus the field to start editing (default activation mode)

Name

Vinicius Vicentini

Username

@vinihvc

Click#

Editing starts with a single click on the preview.

PreviewCode

Edit with click

Click the text to start editing

Name

Vinicius Vicentini

Username

@vinihvc

Double-Click#

Editing starts with a double-click on the preview.

PreviewCode

Edit with double-click

Double-click the text to start editing

Name

Vinicius Vicentini

Username

@vinihvc

None#

No automatic activation. Use EditableEditTrigger to manually start editing.

PreviewCode

Edit with manual trigger

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

Name

Vinicius Vicentini

Username

@vinihvc

Sizes#

The size prop on EditablePreview controls the preview dimensions.

Small#

PreviewCode

Editable content

Large#

PreviewCode

Editable content

Orientation#

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

Horizontal#

PreviewCode

Editable content

Vertical#

PreviewCode

Editable contentEditable content

Examples#

With Textarea#

PreviewCode

Edit description

Double-click the text to start editing

Description

This is a longer description that can be edited. Click to edit and make changes.This is a longer description that can be edited. Click to edit and make changes.

Without Controls#

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

PreviewCode

Edit without controls

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

Name

Vinicius Vicentini

[email protected]

API Reference#

Editable#

Root component. Manages edit mode and value.

Prop	Type	Default
`activationMode`	`focus	dblclick
`orientation`	`"horizontal"	"vertical"`
`submitMode`	`both	enter
`asChild`	`boolean`	`-`
`className`	`string`	`-`

EditableArea#

Wraps the input and preview views.

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

EditableInput#

Input shown when editing. Use asChild for custom input elements.

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

EditablePreview#

Shows the value when not editing. Click to enter edit mode.

Prop	Type	Default
`asChild`	`boolean`	`-`
`size`	`"xs"	"sm"
`className`	`string`	`-`

EditableControl#

Holds edit/cancel/submit control buttons.

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

EditableEditTrigger#

Enters edit mode on click.

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

EditableCancelTrigger#

Cancels editing and reverts to previous value.

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

EditableSubmitTrigger#

Submits the edited value and exits edit mode.

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

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

[

Drawer ](/docs/components/drawer)[

Field ](/docs/components/field)

On This Page

Installation Anatomy Usage Controlled Modes Focus Click Double-Click None Sizes Small Large Orientation Horizontal Vertical Examples With Textarea Without Controls API Reference Editable EditableArea EditableInput EditablePreview EditableControl EditableEditTrigger EditableCancelTrigger EditableSubmitTrigger