Omnibox URL Or Search

ProNew

A single address-and-search box that decides whether the text is a web address or a search, offers the matching action first and then history entries. Use this when one field must open pages and search.

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

limit5

Guide and examples

When to use it

Use it in browsers, wikis and dashboards with one box for jumping to a known page or searching, where Enter must do the obviously right thing.

Do not use it when the box only searches. Use a plain search field.

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
`history`	`{ title, url }[]`	-	Pages to suggest.
`onNavigate`	`(url: string) => void`	-	Runs when a web address or a history entry is chosen.
`onSearch`	`(query: string) => void`	-	Runs when the text is a search.
`value`	`string`	-	The text (controlled).
`defaultValue`	`string`	`""`	Initial text.
`onValueChange`	`(value: string) => void`	-	Runs on typing.
`limit`	`number`	`5`	Most history rows.

Accessibility

The first option is always the default action and is highlighted, so Enter works without arrow keys.
A web address is detected from a scheme, www., localhost or name.tld; its row reads Go to <address> (with https:// added when missing).
History rows are matched on title and address; the address is part of the option's name.
classify is exported so the same rule can run on the server.

Testing

The pattern ships with a Testing Library test (omnibox-url-or-search.test.tsx) that covers classifying addresses and searches, the default action on Enter, history filtering and keyboard selection.