Skip to content

Search Field13.10.5

The Search Field enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.


$ npm i @if-design-system/search-field@13.10.5

Edit this section

Overview

Search offers users a way to explore a website or application using keywords. Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content.

Edit this section

Variations

Type Purpose
Default The default search field.
Search in global header The search field component adjuste to fit into the Global Header component.
Edit this section

Usage

Principles

The Search Field follows the same basic design principles as the Input Fields.

Placement

On a landing or home page, it is recommended that the search box be placed in the top right area of the screen. This is where users expect to find the search.

On a search results page, the natural position of the searchbox is closer to the search results. This helps indicate a relationship between the results and the search query.

Edit this section

Behaviours

Interactions

When searching

When searching

When the user is typing in a search query, a button appears to the right, enabling the user to reset the search query.

Autocomplete

If autocomplete is used, the user will get matches appearing as suggestions. See Autocomplete documentation.

Focus

Default and fallback keyboard focus style for input

2px border with color BL 1, BLUE.

Modifiers

Large

You can also use a larger version of the search field.

NOTE You can set the size freely by adjusting the max-width-property!

Large search field
<form class="if" action="none" onSubmit="javascript: return false;">
  <div class="if search-field large" role="search">
    <input
      type="search"
      class="if input-field"
      id="asdasdad222sgdf9"
      name="asdasdad222sgdf9"
      aria-label="Search"
      placeholder="Search"
    />
    <button type="button" class="if reset" aria-label="Reset"></button>
  </div>
</form>
Edit this section

Anatomy

Search
  1. Search icon
  2. Placeholder
Search
  1. Reset query
Edit this section

Implementation

<form class="if" >
  <div class="if search-field" role="search">
    <input type="search" class="if input-field" id="q" name="q" aria-label="Search" placeholder="Search" />
    <button type="button" class="if reset" aria-label="Reset"></button>
  </div>
</form>
Edit this section

Contact us