Settings Rows with Inline Edit

ProNew

Account settings as rows (label, value, Edit): pressing Edit turns just that row into a small form, only one row can be open at a time, Save and Cancel return focus to that row's Edit button. Use this when settings are many, small and rarely changed.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A settings page lists many values and most visits are to read them, not change them.

Do not use it when: For settings that are edited together, such as a billing address, use one form for the group.

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.

Props

Prop	Type	Description
`rows`	`{ id, label, value, type?, validate? }[]`	The settings. `validate` returns a message or `null`.
`onSave`	`(id, value) => void \| Promise<void>`	Persist one row. A rejection shows "Could not save."

Accessibility

Resting rows are plain text with a button named for what it edits ("Edit email", "Add phone"). The open row is a small form with a label, the value focused, Enter to save and Escape to cancel.
Opening a second row closes the first, so there is never more than one set of unsaved changes to track. Focus returns to the row's Edit button after Save, Cancel or Escape.
Errors are linked alerts and aria-invalid; the Save button reads "Saving..." while the request runs.

Testing

The pattern ships with a Testing Library test (settings-row-inline-edit.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A settings page lists many values and most visits are to read them, not change them.

Do not use it when: For settings that are edited together, such as a billing address, use one form for the group.

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.

Props

Prop	Type	Description
`rows`	`{ id, label, value, type?, validate? }[]`	The settings. `validate` returns a message or `null`.
`onSave`	`(id, value) => void \| Promise<void>`	Persist one row. A rejection shows "Could not save."

Accessibility

Resting rows are plain text with a button named for what it edits ("Edit email", "Add phone"). The open row is a small form with a label, the value focused, Enter to save and Escape to cancel.
Opening a second row closes the first, so there is never more than one set of unsaved changes to track. Focus returns to the row's Edit button after Save, Cancel or Escape.
Errors are linked alerts and aria-invalid; the Save button reads "Saving..." while the request runs.

Testing

The pattern ships with a Testing Library test (settings-row-inline-edit.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.