Profile Edit List Rows

ProNew

A profile form made of list rows where each row shows its value and opens the right editor, a text sheet, a picker or a date sheet, and returns to the list with the new value and focus on the same row. Use this when a phone profile or settings screen edits several values and a long form would feel heavy.

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

Use it when a phone profile or settings screen edits several values and a long form would feel heavy.

Do not use it for forms where people fill everything at once (use a normal form) or one-field changes.

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	Default	Description
`initial`	`{ name: string; bio: string; country: string }`	`required`	Current values.
`countries`	`string[]`	`required`	Country options.
`onChange`	`(values) => void`	`-`	Called after each edit.

Accessibility

Each row is a button named "Name, Ada Lovelace" that opens its editor; the editor is a labelled dialog with Save and Cancel.
After saving, the row shows the new value, a status announces "Name updated", and focus returns to that row.
The country row uses the Picker Sheet, so choosing a value is a listbox with search.

Testing

The pattern ships with a Testing Library test (profile-edit-list-rows.test.tsx) that drives it through roles and the keyboard.