Inline edit

When to use #

Use it for

Renaming a project, document or item without opening a form.
Single-line values that are changed occasionally.

Skip it when

Several fields change together; use a form.
The value needs validation messages; use a field.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/inline-edit.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { InlineEdit } from "@/components/ui/inline-edit"

export function ProjectName() {
  const [name, setName] = useState("Atlas platform");
  return (
    <div className="w-full max-w-xs">
      <InlineEdit label="Project name" value={name} onValueChange={setName} />
    </div>
  );
}

API reference #

InlineEdit

component

PropTypeDefault

label *string—

valuestring—

defaultValuestring""

onValueChange((value: string) => void)—

classNamestring—

It is built on native elements and keeps aria-label and aria-hidden in step with state.

KeyBehaviour

EnterActivates the focused control.

EscapeCloses or cancels, then returns focus to where it came from.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.