Empty Values with Add Prompts

ProNew

A read-only profile where every empty value shows an "Add ..." action that opens just that field, instead of a row of dashes, and counts how complete the profile is. Use this when a profile has optional details people may fill in later.

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 many optional fields and empty ones should invite action, not just show "Not set".

Do not use it when: Do not nag about fields that are not useful to the person; only prompt for ones that improve their experience.

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, string>`	Values by key (`name`, `headline`, `location`, `website`).
`onChange`	`(values) => void`	After a field is saved.

Accessibility

Empty values are buttons whose text says what they do ("Add a headline"), not dashes. The completeness is a progress bar with a name, plus the percentage as text.
Only one field is open at a time; its input has a hidden label that names the field. Save and Cancel are regular buttons, and Enter in the field saves.
Saving an empty value changes nothing, so the profile never records blank strings as filled.

Testing

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