InlineEdit

Inline text editing with click-to-edit and marquee overflow

Default

Usage

import { InlineEdit } from '@tryvienna/ui'

<div className="w-64">
  <InlineEdit value={value} onSave={setValue} />
  <p className="mt-4 text-xs text-muted-foreground">Current value: &quot;{value}&quot;</p>
</div>

Examples

Default

Default

<div className="w-64">
  <InlineEdit value={value} onSave={setValue} />
  <p className="mt-4 text-xs text-muted-foreground">Current value: &quot;{value}&quot;</p>
</div>

With Placeholder

With Placeholder

<div className="w-64">
  <InlineEdit value={value} onSave={setValue} placeholder="Enter a project name..." />
  <p className="mt-4 text-xs text-muted-foreground">
    Current value: &quot;{value || '(empty)'}&quot;
  </p>
</div>

Long Text

Long Text

<div className="w-64">
  <InlineEdit value={value} onSave={setValue} />
  <p className="mt-4 text-xs text-muted-foreground">
    Hover to see the pencil icon. Click to edit the full text.
  </p>
</div>

Disabled

Disabled

<div className="w-64">
  <InlineEdit value={value} onSave={() => {}} disabled />
</div>

API Reference

InlineEdit

Prop	Type	Default	Description
value	string	-
onSave	(value: string) => void	-
placeholder	string	-
disabled	boolean	-

Data Attributes

Component	data-slot
InlineEdit	"inline-edit"