Input - Search

Short intro to component

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

Overview

The input - search is a pre-configured text field that includes typeahead capabilities

Design

Structure

The structure of the search is very similar to the input - text field component

Search icon: the search icon should always be included in a search or typeahead input

Placeholder: the placeholder trails the search icon and provides context to the types of items that will be returned from the search

Value: the input provided from the marketer

Clear (X): appears after a value has been added and can be clicked or focused on to remove the value from the input

🟢 Search / state=inactive, Placeholder=True

🟢 Search / state=inactive, Placeholder=True

🟢 Search / state=Focused, Placeholder=False

🟢 Search / state=Focused, Placeholder=False

 

States

Placeholder, Default (inactive)

Placeholder, Default (inactive)

Default (inactive)

Default (inactive)

Placeholder, Hover

Placeholder, Hover

Hover

Hover

Placeholder, Active/Focused

Placeholder, Active/Focused

Active/Focused

Active/Focused

Placeholder, Error

Placeholder, Error

Error

Error

Placeholder, Disabled

Placeholder, Disabled

Disabled

Disabled

 

Guidelines

  • Clicking the cancel (X) button in the right of the search clears the text and menu filter (but not any of its selections).
  • If a select contains a search, the search should be auto-focused by default when clicking the input so the user can begin typing

 

Use cases

 

  • If a select has seven or more options to select from, it should include a typeahead search at the top of the dropdown menu. When the input is clicked, the search should be auto-focused by default, so that the user can begin typing to filter the available options.
  • Include a placeholder to help indicate the items that the input is indexing
  • Always include the clear control within the input
  • If search is done async, include the loading indicator to the far right of the input
  • Modify the styles or icons within the search input
  • Adjust the structure of the placeholder content
  • Include a ... after the placeholder

 

Content

  • Default placeholder format should be: Search {{item}}s
  • Placeholder can also include additional meta data that the search can filter by: Search {{items}} by {{metadata1}} or {metadata2}

    Example:
    Search campaigns by name or ID

    or

    Search users by name, email, or ID

Accessibility

  • Keyboard Navigation: Ensure text fields are navigable with the keyboard, following logical tab orders.
  • Screen Reader Support: Use label tags and ARIA attributes to describe each field's purpose, ensuring screen readers can accurately convey this information to marketers.
  • Contrast and Visibility: Adhere to WCAG guidelines for text and background contrast, ensuring text fields and their components are easily distinguishable and legible.
  • Error Identification: Provide accessible error identification, using both color and text descriptions to signify and explain errors.

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Healthy