Lookup

Enter a value to find and confirm related details quickly.

View in Figma
Lookup allows users to enter a known value and retrieve related information. It combines input, actions, and feedback into a single, focused interface.

Example

GB
Validation message

Overview

Lookup groups input, validation, and actions into a single component, providing a clear starting point for retrieving data. It is designed to be simple and focused, helping users understand what to enter and how to proceed.

The component is commonly used where a known value is required to return additional information, such as identifiers, references, or formatted inputs.


Formatting

Anatomy

Lookup is composed of a small set of elements grouped within a single container.

GB
Validation message

Content

  • Labels: should describe the required input and may include expected formats or examples. Placeholders can support this by showing a sample value.
  • Buttons: should be direct and action-oriented, such as “Find” or “Lookup”. Alternative actions should clearly describe the option available, such as entering details manually.

Up next: style

Continue to style