Permission-Aware Form

ProNew

One form that shows each field as editable or as read-only text depending on what the current role may change, with a reason on locked fields and a save button that only exists if something is editable. Use this when different roles share a screen.

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

Roles see the same form but may change different fields (admins change plan, members change their name).

Do not use it when: Permissions are enforced by the server; this only mirrors them in the UI. Never rely on hiding controls for security.

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
`role`	`owner`, `admin`, `member`	The current role.
`fields`	`{ key, label, editableBy, reason? }[]`	Which roles may edit which field, and the reason shown otherwise.
`initial`	`Record<string, string>`	Values.
`onSave`	`(changes) => void \| Promise<void>`	Only the editable fields.

Accessibility

A field the role cannot change is plain text in a description list with the reason beside it, rather than a disabled input that screen readers skip and that nobody can copy from.
The role is stated in text at the top. With nothing editable the form says so and has no dead Save button.
The server must enforce the same rules: this component hides controls, it does not secure anything.

Testing

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

Guide and examples

When to use it

Roles see the same form but may change different fields (admins change plan, members change their name).

Do not use it when: Permissions are enforced by the server; this only mirrors them in the UI. Never rely on hiding controls for security.

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
`role`	`owner`, `admin`, `member`	The current role.
`fields`	`{ key, label, editableBy, reason? }[]`	Which roles may edit which field, and the reason shown otherwise.
`initial`	`Record<string, string>`	Values.
`onSave`	`(changes) => void \| Promise<void>`	Only the editable fields.

Accessibility

A field the role cannot change is plain text in a description list with the reason beside it, rather than a disabled input that screen readers skip and that nobody can copy from.
The role is stated in text at the top. With nothing editable the form says so and has no dead Save button.
The server must enforce the same rules: this component hides controls, it does not secure anything.

Testing

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