View and Edit the Same Schema

ProNew

One schema drives both a read-only view and the edit form: the view is a description list of formatted values, Edit swaps it for the form, and Cancel or Save returns to the view with focus on the Edit button. Use this when a details page and its edit form show the same fields.

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 record has a details view and an edit view, and keeping the two in sync by hand is a chore.

Do not use it when: When only one or two fields are editable in place, edit them inline instead of switching the whole page.

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
`initial`	`Record<string, unknown>`	The saved values.
`onSave`	`(values) => void \| Promise<void>`	Called with the cleaned values.

Accessibility

The view is a description list (term and definition pairs), not a disabled form, so values are read as ordinary text, dates are formatted and emails are links.
Changing mode moves focus deliberately: after Cancel or Save it returns to the Edit button, which the person just used, so a keyboard user does not lose their place.
In edit mode the form has labels, required marks and error handling from Auto Form; Cancel is a normal button after the fields.

Testing

The pattern ships with a Testing Library test (auto-form-read-only-toggle.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A record has a details view and an edit view, and keeping the two in sync by hand is a chore.

Do not use it when: When only one or two fields are editable in place, edit them inline instead of switching the whole page.

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
`initial`	`Record<string, unknown>`	The saved values.
`onSave`	`(values) => void \| Promise<void>`	Called with the cleaned values.

Accessibility

The view is a description list (term and definition pairs), not a disabled form, so values are read as ordinary text, dates are formatted and emails are links.
Changing mode moves focus deliberately: after Cancel or Save it returns to the Edit button, which the person just used, so a keyboard user does not lose their place.
In edit mode the form has labels, required marks and error handling from Auto Form; Cancel is a normal button after the fields.

Testing

The pattern ships with a Testing Library test (auto-form-read-only-toggle.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.