Inputs

Inline edit

Renames in place: opens focused with the text selected; Enter or leaving keeps it, Escape drops it. Input-method Enter doesn't commit.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

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

Props

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

InlineEdit

Renames something where its name is shown: a sidebar row, a page title, a tab. The caller mounts the field when the edit starts; it opens focused with its text selected, and the first of Enter, Escape or focus leaving it ends the edit. Enter and leaving commit, Escape cancels. While an input method composes (Chinese, Japanese, Korean…), Enter and Escape are its own and end nothing. Plain keys stay in the field, so a tab strip's arrow keys or a pane's Escape don't act while the name is being typed; shortcuts with ⌘, Ctrl or Alt still reach the app. A click in the field stays there too, so the row or tab around it doesn't take it.

Prop	Type	Default	Description
initial (required)	string	—	The text the field opens with, selected.
aria-label (required)	string	—	The field's name for assistive technology ("Document title").
onCommit (required)	(value: string) => void	—	Enter, or focus leaving the field: the text as typed. The caller trims it or refuses an empty one.
onCancel (required)	() => void	—	Escape: the edit is dropped.

Also takes InputProps, except value, defaultValue, onChange, onValueChange, onKeyDown, onBlur, onFocus, onClick, autoFocus, aria-label, leading and trailing.