InputEditable

Compound trigger-content-toolbar component with two variant axes: trigger appearance (input, button, ghost, card) and content display (inline, popover, dialog).

Import

import { InputEditable, InputEditableTrigger, InputEditableContent, InputEditableBody, InputEditableToolbar, InputEditableClose } from "@repo/design-system/components/input/input-editable";

Playground

Display
Trigger
Disabled

Value: Apple, Cherry

Display: Inline

Display: Popover

Display: Dialog

Trigger Variants

Controlled

Open: false | Value: Acme Corp

Disabled