Select Reset With Form

ProNew

A searchable select that follows its form: it goes back to its starting value on form reset, shows when it differs from that value and offers Undo for that one field. Use this when a settings form has a Reset button and per-field revert.

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.

defaultValue

name

label

Guide and examples

When to use it

Use it in settings and profile forms, where people change several fields before saving and want to see what changed and go back one field or all of them.

Do not use it when changes save immediately. There is nothing to reset to.

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	Default	Description
`options`	`{ value, label }[]`	-	The choices.
`defaultValue`	`string`	`""`	The starting value; Reset and Undo restore it.
`name`	`string`	-	Submits the value with a form.
`label`	`string`	-	Visible label.
`onValueChange`	`(value: string) => void`	-	Runs on every change, including a reset.

Accessibility

The field listens to its form's reset event, the same one a native <input type="reset"> fires, and restores the starting value.
When the value differs, Changed from <label> is shown next to a real Undo button; a polite status announces Restored Europe/Paris.
The visible label is associated with the trigger.
The marker is text with a badge, not colour alone.

Testing

The pattern ships with a Testing Library test (select-reset-with-form.test.tsx) that covers the changed marker, per-field Undo, a native form reset and the hidden value.

Guide and examples

When to use it

Use it in settings and profile forms, where people change several fields before saving and want to see what changed and go back one field or all of them.

Do not use it when changes save immediately. There is nothing to reset to.

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	Default	Description
`options`	`{ value, label }[]`	-	The choices.
`defaultValue`	`string`	`""`	The starting value; Reset and Undo restore it.
`name`	`string`	-	Submits the value with a form.
`label`	`string`	-	Visible label.
`onValueChange`	`(value: string) => void`	-	Runs on every change, including a reset.

Accessibility

The field listens to its form's reset event, the same one a native <input type="reset"> fires, and restores the starting value.
When the value differs, Changed from <label> is shown next to a real Undo button; a polite status announces Restored Europe/Paris.
The visible label is associated with the trigger.
The marker is text with a badge, not colour alone.

Testing

The pattern ships with a Testing Library test (select-reset-with-form.test.tsx) that covers the changed marker, per-field Undo, a native form reset and the hidden value.