Inline edit

Edits text in place and keeps the draft when the save fails.

Title

inline-edit-basic-demo.tsx

"use client";import { InlineEdit } from "@/components/vip-ui/inline-edit";export function InlineEditBasicDemo() {  return (    <InlineEdit label="Title" defaultValue="Field notes" className="max-w-sm" />  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-inline-edit.json

Disabled

Owner

inline-edit-disabled-demo.tsx

"use client";import { InlineEdit } from "@/components/vip-ui/inline-edit";export function InlineEditDisabledDemo() {  return (    <InlineEdit      label="Owner"      defaultValue="Maya Chen"      isDisabled      className="max-w-sm"    />  );}

Empty value

Description

inline-edit-empty-demo.tsx

"use client";import { InlineEdit } from "@/components/vip-ui/inline-edit";export function InlineEditEmptyDemo() {  return (    <InlineEdit      label="Description"      placeholder="Add a description"      className="max-w-sm"    />  );}

Save error

Return a promise from onSave to show progress. Throw to keep the editor open with the message.

Title

inline-edit-demo.tsx

"use client";import { useState } from "react";import { InlineEdit } from "@/components/vip-ui/inline-edit";const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));export function InlineEditDemo() {  const [title, setTitle] = useState("Field notes");  return (    <InlineEdit      label="Title"      value={title}      onSave={async (next) => {        await wait(700);        if (next.trim().length < 3) {          throw new Error("Enter 3 or more characters.");        }        setTitle(next.trim());      }}      className="max-w-sm"    />  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria TextField (opens in a new tab).

label: stringRequired: Visible label in display and edit modes.
value: string: The saved value, controlled.
defaultValue: string = "": The saved value at first, uncontrolled.
placeholder: string = "Not set": Text shown when the value is empty.
onSave: (value: string) => void | Promise<void>: Called when you save a changed value. While its promise is pending, the save button shows a spinner. If it throws, the editor stays open and shows the error message. When controlled, update value here.
isDisabled: boolean = false: Prevents opening the editor.