InlineEdit

Stable

A labelled value that reads as plain text and turns into an input in place when you press Edit.

Also known as editable text, click to edit, in place edit

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Amount

₹3,499

Seller

Flipkart

Date

7 Oct 2026

function Example() {
  const [amount, setAmount] = useState("3499");
  const [seller, setSeller] = useState("Flipkart");
  const [when, setWhen] = useState("7 Oct 2026");
  return (
    <Stack gap={1} className="w-80 max-w-full">
      <InlineEdit label="Amount" value={amount} onChange={setAmount} inputMode="decimal" originalValue="3499" display={<Money value={Number(amount) || 0} />} />
      <InlineEdit label="Seller" value={seller} onChange={setSeller} originalValue="Flipkart" />
      <InlineEdit label="Date" value={when} onChange={setWhen} originalValue="7 Oct 2026" />
    </Stack>
  );
}

Change one value and press Done. The Edited tag appears next to its label. The rows stack in a Stack, with a small gap, and each row draws its own divider.

Usage Code Design Accessibility

When to use it

Let people confirm facts that were read or worked out for them, and fix only the ones that are wrong, without a form full of empty boxes.

Made of: Label · Edited tag · Value · Edit button · Input with Done and Cancel · Error with icon

Use it for

A short list of facts to check before a next step, such as an amount, a seller and a date.
A value that is usually right and only sometimes needs changing.
A value shown in a special way, such as money, that turns into plain text when edited.

Not for

Collecting new information from an empty form: use Field.
A number that is stepped up and down: use NumberField.
A choice between a few options: use SegmentedControl.
Choosing from a fixed list: use Select.

Do and avoid

Seller

Flipkart

Amount

3499

Do. Short values read as text and open for a quick fix.

Notes

The parcel arrived late and the box was open. Two items were missing, and the invoice listed the wrong address for delivery.

Avoid. Long text in a one-line edit is cramped and hard to fix.

Do

Show the value as plain text first. Checking is easier than typing.
Keep a visible Edit button on every row.
Let the Edited tag show what was fixed.
Keep each value short, as a single line.

Avoid

Do not show every value as an empty input box.
Do not make the whole row the only thing you can press.
Do not use the lime AI colour for the Edited tag. It is neutral on purpose.
Do not use it for long text. Use a full form for that.

On a phone

The edit button keeps its size and has a 44px tap area on a touch screen, and the value wraps on the left of it.
Editing swaps the value for a text box with Done and Cancel in one row, and the text box is 16px so the page does not zoom.
Set inputMode so a phone shows the right keyboard, such as numbers.

Properties

Prop	Type	Default	Description
labelrequired	string	none	Visible label, small and muted. It is also the accessible name of the input.
valuerequired	string	none	The current text.
onChangerequired	(value: string) => void	none	Called with the new text when an edit is saved and the text changed.
display	ReactNode	none	How to show the value when not editing, such as a Money. Defaults to the text, or Not set when empty.
edited	boolean	none	Forces the Edited tag on or off. When left out, the part compares value with originalValue.
originalValue	string	none	The value before anyone changed it. When left out, the first value the part received is used.
inputMode	"text" \| "numeric" \| "decimal" \| "tel" \| "email" \| "url" \| "search"	none	The keyboard to show on phones while editing.
validate	(value: string) => string \| null	none	Returns an error message, or null when the value is fine. On an error the edit stays open and the message shows under the field.
editLabel	string	`Edit ${label}`	Accessible name of the Edit button.
className	string	none	Classes for the outer row.

"Show code under the preview gives the code for the example on the stage."

In Figma

In Figma, one InlineEdit switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.

InlineEdit in Figma: each property and the React prop it sets
Figma property	React	Values
Edited	`edited`	On or off
Label	`label`	Any text

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

reading: The value shows as plain text, with a visible Edit button on the right.
editing: After Edit is pressed the value becomes an input with Done and Cancel buttons, and focus moves to the input with its text selected.
edited: When the value differs from the original, or edited is true, an Edited tag shows next to the label.
error: When validate returns a message on save, the edit stays open, the input is invalid and the message shows under it with an icon.
saved: After a changed value is saved, a hidden polite live region says Saved.
empty: An empty value without display shows Not set in muted text.
hover: The Edit button is shaded when the pointer is over it.

Tokens

Change one of these and every part that uses it follows.

--fg
--fg-muted
--border
--surface-hover
--surface-sunken
--danger-fg
--dur-fast
--radius-control

A three-row fact check