Search

Search allows users to find the content they are looking for across an app or a website. Basically, the input search allows users to input a query into a search text field to view related results.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

Example

<div class="nj-search">
  <div class="nj-search__field-wrapper">
    <span class="nj-search__icon material-icons nj-icon-material" title="searchIcon" aria-label="searchIcon" aria-hidden="true">
      search
    </span>

    <input placeholder="Search" class="nj-search__field" type="search" id="searchId" value="">
    <label for="searchId" class="nj-sr-only">Search</label>
    <button class="nj-icon-btn nj-search__clear-button" type="button"> <span class="nj-sr-only">clear</span>
      <span class="material-icons nj-icon-material nj-icon-material--size-inherit nj-icon-btn__icon" aria-hidden="true">
          cancel
        </span>

    </button>
  </div>
  <button type="button" class="nj-btn nj-search__button">Search</button>
</div>

Radio-group

Segmented-control