Inline edit
Rename a value where it is displayed
Project namereported commits 0 · discards 0 · focus displayCommitted: "Docs site"
Installation
npx shadcn@latest add @sudokw/components-inline-editimport { InlineEdit } from "@gpuixui/components";Usage
import { InlineEdit } from "@gpuixui/components";
import { useState } from "react";
export const RenameProject = () => {
const [name, setName] = useState("Docs site");
return (
<InlineEdit
label="Project name"
onCommit={(next) => {
setName(next);
}}
value={name}
/>
);
};API reference
InlineEdit
| Prop | Type | Default | Consequence |
|---|---|---|---|
value | string | — | the committed text; required, and the caller owns it |
onCommit | (value: string) => void | — | called on a changed Enter or blur commit, never twice per edit, and never when the caller disables the control mid-edit |
label | string | — | the accessible name of both the display and the input |
placeholder | string | "—" | painted in mutedForeground while the value is empty |
disabled | boolean | false | leaves the tab order, ignores activation and fades to 0.5 |
editing | boolean | — | the controlled edit state; undefined leaves it to the control |
defaultEditing | boolean | false | the uncontrolled starting state |
onEditingChange | (editing: boolean) => void | — | reports the edit state the control took |
style | StateStyle<InlineEditState> | — | resolved against { editing, disabled }, merged last |
className | string | — | joined after the recipe, so it wins conflicts |
testId | string | — | stable locator |
defaultValue / onValueChange / onChange | the field surface it inherits — see Input | — | the draft the control keeps before a commit, and every edit it reports |
onSubmit | (event: EventPayload) => void | — | Enter while editing; the commit has already run |
readOnly / autoFocus | boolean | false | uneditable, or focused on mount |
invalid / description | boolean · string | false · none | validation paint, and the help the field announces |
size / fullWidth / tabIndex | "sm" | "md" | "lg" · boolean · number | "md" · false · the field's place | the input's height, its width, and its tab stop |
ref / aria-id / onLayout | the addressed element | — | the input while editing: focus it, measure it, name it for automation |
onClick / onKeyDown / onKeyUp / onFocus / onBlur | host handlers | — | composed with the control's own; yours runs first |
Keyboard
- Enter
- starts an edit, and commits the input
- Space
- starts an edit on the display
- Escape
- cancels and restores the stored value
read from inline-edit.tsx
Edit this page on GitHubapps/docs/content/docs/components/inline-edit.mdx