Sections

Utilities

Forms

Hooks

useIsMobileNew

Editable

Allows user to edit text in-place.

Docs API

Edit user

Click in the field or edit button to start editing

Installation


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.

Edit user

Click the edit button to start editing

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

The size prop on EditablePreview controls the preview dimensions.

Small

Editable content

Large

Editable content

Orientation

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

Horizontal

Editable content

Vertical

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

API Reference

Editable

Root component. Manages edit mode and value.

Prop	Type	Default
`activationMode`	`focus \| dblclick \| click \| none`	`'focus'`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`submitMode`	`both \| enter \| blur \| none`	`'both'`
`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" \| "md" \| "lg" \| "xl"`	`"md"`
`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

Field