Locked Field with Unlock

ProNew

A sensitive field shown read-only with a lock and the reason it is protected; "Unlock to edit" shows what can go wrong, enables the input, and it locks again after saving. Use this when changing a value (URL slug, legal name, account ID) can break things.

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.

label

initial

warning

Guide and examples

When to use it

A value is rarely changed and changing it has side effects (links break, invoices change, integrations fail).

Do not use it when: For ordinary values, a locked field is just friction.

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
`label`	`string`	The field's label.
`initial`	`string`	The saved value.
`warning`	`string`	Why it is locked and what changing it does.
`save`	`(value) => void \| Promise<void>`	Called with the new value.

Accessibility

A locked field uses readonly, not disabled: it stays focusable, selectable and copyable, and a screen reader reads its value. The warning is its accessible description.
The lock icon is decorative; "Unlock to edit" names the action and its result. After unlocking focus moves into the field; after saving or cancelling it returns to the Unlock button.
A successful change is announced in a polite status line.

Testing

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