Inline Edit React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Inline Edit is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import InlineEdit from @/components/ui/inline-edit.

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

const STATUSES = [
  { value: "active", label: "Active" },
  { value: "reserved", label: "Reserved" },
  { value: "sold", label: "Sold" },
]

export function ListingDetails({ save }: { save: (field: string, value: unknown) => Promise<void> }) {
  return (
    <dl className="grid grid-cols-[96px_1fr] items-center gap-x-4 gap-y-1">
      <dt className="text-sm text-muted-foreground">Title</dt>
      <dd>
        <InlineEdit
          aria-label="Listing title"
          defaultValue="Trek FX 2 city bike"
          emptyText="Add a title"
          maxLength={70}
          validate={(v) => (v.trim() ? null : "The title cannot be empty")}
          onSave={(v) => save("title", v)}
        />
      </dd>
      <dt className="text-sm text-muted-foreground">Price</dt>
      <dd>
        <InlineEdit
          type="number"
          aria-label="Price"
          defaultValue={280}
          locale="en-US"
          format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
          onSave={(v) => save("price", v)}
        />
      </dd>
      <dt className="text-sm text-muted-foreground">Status</dt>
      <dd>
        <InlineEdit type="select" aria-label="Status" options={STATUSES} defaultValue="active" onSave={(v) => save("status", v)} />
      </dd>
    </dl>
  )
}

Props

• typedefault "text"
  "text" | "textarea" | "number" | "select"

  The editor: a single-line Input, a growing Textarea, a NumberInput (value is number | null, formatted with locale and format) or a Select (needs options, saves on the pick).

• value
  string | number | null

  Controlled value: a string, or number | null for type="number". Pair it with onValueChange, which fires when a save starts (optimistic) and again with the old value if it fails.

• defaultValuedefault ""
  string | number | null

  Starting value while uncontrolled: "" for text, null for numbers. The playground reads a number for type="number" and an option value (active, reserved, sold) for select.

• onValueChange
  (value) => void

  Called with the new value when a save starts, and with the previous one when the save fails (rollback).

• onSave
  (value) => (void | PromiseLike<unknown>)

  Persists the value. A promise keeps the saving spinner; a rejection rolls back, shakes the value and shows the error (its message, else labels.failed). Unchanged values skip it; a save made while one is pending waits and only the latest result counts.

• validate
  (value) => (string | null | undefined)

  Return a message to keep the editor open with the error under it. It re-checks while typing once it shows.

• options
  SelectItems

  The options of a select editor: { value, label, description?, icon? } or groups of them.

• emptyTextdefault "Click to add"
  string

  The muted display while the value is empty.

• placeholderdefault ""
  string

  The editor's placeholder, shown while the draft is empty.

• aria-labeldefault ""
  string

  Names the display button and the editor. Screen readers hear "Listing title: Trek FX 2 city bike, Edit".

• sizedefault "md"
  "sm" | "md" | "lg"

  Text 13 / 14 / 15px (16px on phones) and the editor's field size (32 / 40 / 48px, md 44px on touch). A heading look comes from className (text-2xl font-semibold); the editor follows it.

• variantdefault "ghost"
  "ghost" | "underline"

  The display: ghost tints on hover like a quiet field, underline draws a dashed line under the text (for values inside a sentence).

• radiusdefault "sm"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape of the hover tint and the editor box, scaled per size like the button's (sm is 6 / 8 / 10px).

• showIcondefault true
  boolean

  The pencil after the value: on hover and keyboard focus with a mouse, always visible on touch.

• icon
  ReactNode

  Replaces the pencil (and the icon of the edit button with activation="button").

• fullWidthdefault true
  boolean

  Fills its container. false sizes it to the text, so it sits inside a sentence (wrap the sentence in a div, not a <p>: the editor holds block elements); the editor opens as wide as the text was.

• defaultEditingdefault false
  boolean

  Starts in edit mode (without taking focus). Use editing / onEditingChange to control it.

• editing
  boolean

  Controlled edit mode.

• onEditingChange
  (editing: boolean) => void

  Called when editing starts and ends.

• onCancel
  () => void

  Called after Escape, the cancel button, a select closed without a pick, or a blur with blurAction="cancel".

• disableddefault false
  boolean

  Dims the value and blocks editing.

• readOnlydefault false
  boolean

  Shows the value only: not a button, no pencil, text selectable.

• activationdefault "click"
  "click" | "doubleclick" | "button"

  click: a click or tap edits. doubleclick: a double click edits (a single tap on touch, Enter from the keyboard), for headings people select often. button: only the pencil button edits, so links in the value stay clickable.

• showActionsdefault true
  boolean

  Save and cancel buttons after the editor (below a textarea, with the Cmd+Enter hint). Selects save on the pick and never show them.

• blurActiondefault "save"
  "save" | "cancel" | "none"

  What leaving the editor (Tab, a click elsewhere) does. none keeps the editor open until Enter, Escape or a button.

• selectOnFocusdefault true
  boolean

  Selects the text when the editor opens, so typing replaces it. A textarea puts the caret at the end instead.

• maxLengthdefault 0
  number

  The editor's character limit (text and textarea); 0 = none.

• successDurationdefault 1200
  number

  Milliseconds the saved check stays after a save lands; 0 = no check.

• localedefault ""
  string

  Formats and parses numbers ("1,200.5" in en-US, "1.200,5" in de-DE). Defaults to the nearest LocaleProvider, then the browser.

• format
  Intl.NumberFormatOptions

  Number display: { style: "currency", currency: "USD", currencyDisplay: "narrowSymbol" }, units, percent.

• renderValue
  (value) => ReactNode

  Custom display, e.g. a price with a badge or a link (pair it with activation="button").

• labels
  { edit?; save?; cancel?; saving?; saved?; failed?; saveHint? }

  Every string: { edit: "Edit", save: "Save", cancel: "Cancel", saving: "Saving", saved: "Saved", failed: "Could not save", saveHint: "to save" }. Saved and failed are announced in a polite live region.

• editorProps
  Partial<InputProps | TextareaProps | NumberInputProps | SelectProps>

  Extra props for the editor: min / max / step / steppers for numbers, maxRows for a textarea, search for a select.

• classNames
  Partial<Record<"display" | "value" | "empty" | "icon" | "status" | "editor" | "actions" | "save" | "cancel" | "hint" | "error", string>>

  Extra classes for the inner parts.

• className
  string

  Classes for the root, merged last. Font classes here (text-2xl font-semibold) style both the value and the editor.

Parts

FAQ

Used in

More React form components