Inline edit

Switches a text value into an editor with explicit save and cancel, validation, and optional async persistence.

Preview

Project name

Field study

In action

Change a detail

Project settings

Edit where the value lives. Save commits it; Escape leaves it as it was.

Project name

Field study

When to use

Use it for

A short text value edited in its reading context.
Provide onSave to await persistence before committing a new value.

Not for

Long-form writing; use Textarea.
Implicit save-on-blur flows; this requires an explicit save.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { InlineEdit } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/inline-edit.

2. Vendor the source

npx @noorddev/vlak-cli add inline-edit

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/inline-edit.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { InlineEdit } from "@noorddev/vlak-react";

<InlineEdit label="Project name" name="project" defaultValue="Field study" validate={(value) => value.trim() ? undefined : "Enter a project name"} />

Props

InlineEdit

Prop	Type	Default	Description
`value`	`string`
`defaultValue`	`string`	`""`
`onValueChange`	`(value: string) => void`
`label`	`string`	`"Value"`
`name`	`string`
`disabled`	`boolean`
`placeholder`	`string`	`"Not set"`
`validate`	`(value: string) => string`
`onSave`	`(value: string) => void \| Promise<void>`		Resolves before the value is committed. Rejections leave the draft editable.
`editLabel`	`string`	`"Edit"`
`saveLabel`	`string`	`"Save"`
`cancelLabel`	`string`	`"Cancel"`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">.

Keyboard

Keys	Does
`Enter, Space on Edit`	Opens the editor, focuses the input and selects its text.
`Enter in the editor`	Validates and saves without submitting the enclosing form.
`Escape in the editor`	Discards the draft and returns focus to Edit.

Accessibility

The input is named by the visible label. Save errors preserve the draft and appear as alerts.
Successful save and cancel return focus to Edit. Pending saves disable duplicate actions and expose aria-busy.
Hidden name submits only the committed value. Form reset restores uncontrolled defaults and discards drafts; late pending responses do not reapply them.
The forwarded ref reaches the root div. No nested form is introduced.

Markup

<div class="rs-inline-edit"><span class="rs-inline-edit-label">Project name</span><div class="rs-inline-edit-row"><span class="rs-inline-edit-value">Field study</span><button class="rs-btn-ghost rs-inline-edit-action" type="button" aria-label="Edit Project name">Edit</button></div></div>

Classes

.rs-inline-edit.rs-inline-edit-row.rs-inline-edit-label.rs-inline-edit-value.rs-inline-edit-input.rs-inline-edit-action.rs-inline-edit-error

Depends on

/input /button