Suggest Or Custom Value

ProNew

A text field that suggests values but accepts any text, commits on Enter or blur, labels the result as From list or Custom value and restores the last committed value on Escape. Use this when the list is a help, not a rule.

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

defaultValue

label

placeholder

Guide and examples

When to use it

Use it for job title, company, school and city, where most people pick a common value, some need their own, and refusing their text would be wrong.

Do not use it when only listed values are valid. Use a combobox, which does not accept free text.

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
`suggestions`	`string[]`	-	Common values.
`value`	`string`	-	The committed value (controlled).
`defaultValue`	`string`	`""`	Initial value.
`onValueChange`	`(value: string, info: { custom: boolean }) => void`	-	Runs when a value is committed (Enter, pick or blur).
`label`	`string`	-	Visible label.
`placeholder`	`string`	-	Input placeholder.

Accessibility

The input is a combobox with aria-autocomplete="list" and a listbox; no suggestion is highlighted until the person arrows to one, so Enter means "use what I typed".
The state under the field (From list or Custom value) is a polite role="status" line, never colour alone.
Blur commits the typed text; Escape twice restores the last committed value.
Matching is case-insensitive and shows prefix matches first.

Testing

The pattern ships with a Testing Library test (suggest-or-custom-value.test.tsx) that covers committing typed text as custom, picking a suggestion, Escape restoring and the status text.

Guide and examples

When to use it

Use it for job title, company, school and city, where most people pick a common value, some need their own, and refusing their text would be wrong.

Do not use it when only listed values are valid. Use a combobox, which does not accept free text.

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
`suggestions`	`string[]`	-	Common values.
`value`	`string`	-	The committed value (controlled).
`defaultValue`	`string`	`""`	Initial value.
`onValueChange`	`(value: string, info: { custom: boolean }) => void`	-	Runs when a value is committed (Enter, pick or blur).
`label`	`string`	-	Visible label.
`placeholder`	`string`	-	Input placeholder.

Accessibility

The input is a combobox with aria-autocomplete="list" and a listbox; no suggestion is highlighted until the person arrows to one, so Enter means "use what I typed".
The state under the field (From list or Custom value) is a polite role="status" line, never colour alone.
Blur commits the typed text; Escape twice restores the last committed value.
Matching is case-insensitive and shows prefix matches first.

Testing

The pattern ships with a Testing Library test (suggest-or-custom-value.test.tsx) that covers committing typed text as custom, picking a suggestion, Escape restoring and the status text.