Inline Editable Cell

ProNew

A table cell that turns into a field on click or Enter, validates as you type, saves on Enter or blur, cancels on Escape and returns focus to the cell.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

label

placeholder

Guide and examples

When to use it

Use it for tables where people fix small values in place: quantities, names, prices, tags. It keeps them in the flow of the table instead of sending them to a form.

Do not use it for long or structured values (addresses, rich text), or for fields where one wrong keystroke is costly: open a dialog or a form there.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Usage

onSave may return a promise. While it runs the field is disabled; if it rejects, the field stays open and shows the error.

Props

Prop	Type	Default	Description
`value`	`string`	`-`	The saved value.
`onSave`	`(next: string) => void \| Promise<void>`	`-`	Called with the new value when it is valid and changed.
`label`	`string`	`-`	Names the cell for screen readers, for example "Quantity of Oat milk".
`validate`	`(next: string) => string \| null`	`-`	Returns an error message, or `null` when the value is fine.
`placeholder`	`string`	`Empty`	Shown when the value is empty.
`className`	`string`	`-`	Class name for the cell.

Accessibility

At rest the cell is a button named Edit {label}: {value}, so a screen reader announces what it edits and its current value.
Enter or Space opens the field with its text selected; Enter saves, Escape cancels, and leaving the field saves a valid value.
An invalid value keeps the field open. The message is a role="alert" linked with aria-describedby, and the field has aria-invalid.
Focus returns to the cell after saving or cancelling, so keyboard users do not lose their place in the table.

Testing

The pattern ships with a Testing Library test (inline-editable-cell.test.tsx) that covers save, cancel, validation, blur and a failed save.

Guide and examples

When to use it

Use it for tables where people fix small values in place: quantities, names, prices, tags. It keeps them in the flow of the table instead of sending them to a form.

Do not use it for long or structured values (addresses, rich text), or for fields where one wrong keystroke is costly: open a dialog or a form there.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Usage

onSave may return a promise. While it runs the field is disabled; if it rejects, the field stays open and shows the error.

Props

Prop	Type	Default	Description
`value`	`string`	`-`	The saved value.
`onSave`	`(next: string) => void \| Promise<void>`	`-`	Called with the new value when it is valid and changed.
`label`	`string`	`-`	Names the cell for screen readers, for example "Quantity of Oat milk".
`validate`	`(next: string) => string \| null`	`-`	Returns an error message, or `null` when the value is fine.
`placeholder`	`string`	`Empty`	Shown when the value is empty.
`className`	`string`	`-`	Class name for the cell.

Accessibility

At rest the cell is a button named Edit {label}: {value}, so a screen reader announces what it edits and its current value.
Enter or Space opens the field with its text selected; Enter saves, Escape cancels, and leaving the field saves a valid value.
An invalid value keeps the field open. The message is a role="alert" linked with aria-describedby, and the field has aria-invalid.
Focus returns to the cell after saving or cancelling, so keyboard users do not lose their place in the table.

Testing

The pattern ships with a Testing Library test (inline-editable-cell.test.tsx) that covers save, cancel, validation, blur and a failed save.