Search

The search input allows users to enter text to search through a dataset or website, leveraging native HTML search features like the browser's built-in "clear" button

Decorative page cover image showing an example of the search field

Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content.

Anatomy

Listing all the separate elements of the file uploader
  1. Label (optional): Text that clearly indicate the user about the content they need to enter in the field.
  2. Start icon
  3. Helper text (optional): Assistive text that can provide additional aid or context to the user. Often used to explain the correct data format or limitations.
  4. Field value: User entered content.
  5. Placeholder: Provides hints or examples of what to enter. Placeholder text disappears after the user begins entering data into the input and should not contain crucial information.
  6. Clear button: Clears the input text when clicked.

Search results

Results appear in a dropdown style list under the field.

Example of a search field in use, displaying results in a list underneath

© 2025 CDS. Page last updated on Sep 20, 2024, 08:43