Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Popover Inline Rename

ProNew

A name that is also a button: pressing it opens a small popover with the field selected, Enter saves, Escape cancels and a failing save keeps the message on screen.

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.

value

label

maxLength60

Guide and examples

When to use it

Use this for titles of documents, boards or projects that people rename occasionally and that should stay plain text the rest of the time.

Do not use it for tables where many cells are editable (use inline-editable-cell) or for names that need uniqueness checks as you type.

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.

Log in Get Pro for $35

Props

PopoverInlineRename

Prop	Type	Default	Description
`value`	`string`	-	The current name.
`onRename`	`(name: string) => void \| Promise<void>`	-	Called with the trimmed name. A rejection shows its message and keeps the popover open.
`label`	`string`	`Rename`	Start of the trigger's accessible name.
`maxLength`	`number`	`60`	Longest name.

Accessibility

The trigger's name includes the current value ("Rename project: Orbit"), so a screen reader hears what it will change.
Errors are announced in a role="alert" message linked with aria-describedby; the field gets aria-invalid.
Radix popover behaviour: focus moves into the field on open and returns to the trigger on close.

Keyboard

Key	Action
Enter or Space on the name	opens the popover
Enter in the field	saves
Escape	cancels and returns focus to the name

Testing

The pattern ships a Testing Library test (popover-inline-rename.test.tsx) that covers the trigger name, selecting the field, saving with Enter, empty names, failures and Escape.