search bar

The search bar element let the user search queries into.

According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the search bar.

component variations

<div class="m-search-bar">
  <div class="a-search-input">
    <input type="search" id="search-input-1" name="search bar" />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar readonly

<div class="m-search-bar">
  <div class="a-search-input">
    <input
      type="search"
      id="search-input-2"
      name="search bar readonly"
      readonly=""
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
    disabled=""
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar disabled

<div class="m-search-bar">
  <div class="a-search-input">
    <input
      type="search"
      id="search-input-3"
      name="search bar disabled"
      disabled=""
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
    disabled=""
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with label

<div class="m-search-bar">
  <div class="a-search-input">
    <label for="search-input-4">What do you want to find</label>
    <input type="search" id="search-input-4" name="search bar with label" />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with label readonly

<div class="m-search-bar">
  <div class="a-search-input">
    <label for="search-input-5">What do you want to find</label>
    <input
      type="search"
      id="search-input-5"
      name="search bar with label readonly"
      readonly=""
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
    disabled=""
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with label disabled

<div class="m-search-bar">
  <div class="a-search-input">
    <label for="search-input-6">What do you want to find</label>
    <input
      type="search"
      id="search-input-6"
      name="search bar with label disabled"
      disabled=""
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
    disabled=""
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with very long label

<div class="m-search-bar">
  <div class="a-search-input">
    <label for="search-input-7">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis
      labore consequatur distinctio provident voluptatum nisi recusandae quod
      asperiores quo, architecto cum nesciunt nemo, vel minima possimus et
      blanditiis numquam, cupiditate deserunt fugit delectus earum ducimus
      alias! Quam atque laborum tempore alias magnam tenetur fuga facere totam,
      harum, ipsa sit!
    </label>
    <input
      type="search"
      id="search-input-7"
      name="search bar with very long label"
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with very long label readonly

<div class="m-search-bar">
  <div class="a-search-input">
    <label for="search-input-8">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis
      labore consequatur distinctio provident voluptatum nisi recusandae quod
      asperiores quo, architecto cum nesciunt nemo, vel minima possimus et
      blanditiis numquam, cupiditate deserunt fugit delectus earum ducimus
      alias! Quam atque laborum tempore alias magnam tenetur fuga facere totam,
      harum, ipsa sit!
    </label>
    <input
      type="search"
      id="search-input-8"
      name="search bar with very long label readonly"
      readonly=""
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
    disabled=""
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with very long label disabled

<div class="m-search-bar">
  <div class="a-search-input">
    <label for="search-input-9">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis
      labore consequatur distinctio provident voluptatum nisi recusandae quod
      asperiores quo, architecto cum nesciunt nemo, vel minima possimus et
      blanditiis numquam, cupiditate deserunt fugit delectus earum ducimus
      alias! Quam atque laborum tempore alias magnam tenetur fuga facere totam,
      harum, ipsa sit!
    </label>
    <input
      type="search"
      id="search-input-9"
      name="search bar with very long label disabled"
      disabled=""
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
    disabled=""
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with placeholder

<div class="m-search-bar">
  <div class="a-search-input">
    <input
      type="search"
      id="search-input-10"
      name="search bar with placeholder"
      placeholder="e.g.: hint"
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with placeholder readonly

<div class="m-search-bar">
  <div class="a-search-input">
    <input
      type="search"
      id="search-input-11"
      name="search bar with placeholder readonly"
      placeholder="e.g.: hint"
      readonly=""
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
    disabled=""
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with placeholder disabled

<div class="m-search-bar">
  <div class="a-search-input">
    <input
      type="search"
      id="search-input-12"
      name="search bar with placeholder disabled"
      placeholder="e.g.: hint"
      disabled=""
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
    disabled=""
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with placeholder and label

<div class="m-search-bar">
  <div class="a-search-input">
    <label for="search-input-13">What do you want to find</label>
    <input
      type="search"
      id="search-input-13"
      name="search bar with placeholder and label"
      placeholder="e.g.: hint"
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with placeholder and label readonly

<div class="m-search-bar">
  <div class="a-search-input">
    <label for="search-input-14">What do you want to find</label>
    <input
      type="search"
      id="search-input-14"
      name="search bar with placeholder and label readonly"
      placeholder="e.g.: hint"
      readonly=""
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
    disabled=""
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

search bar with placeholder and label disabled

<div class="m-search-bar">
  <div class="a-search-input">
    <label for="search-input-15">What do you want to find</label>
    <input
      type="search"
      id="search-input-15"
      name="search bar with placeholder and label disabled"
      placeholder="e.g.: hint"
      disabled=""
    />
    <button type="button" class="a-search-input__icon-close">
      <i class="a-icon ui-ic-close-small"></i>
    </button>
  </div>
  <button
    type="button"
    class="a-button a-button--primary m-search-bar__icon-search"
    disabled=""
  >
    <i class="a-icon a-button__icon boschicon-bosch-ic-search"></i>
    <span class="a-button__label">Search</span>
  </button>
</div>

additional content

styles SCSS

.m-search-bar {
  display: flex;

  &__icon-search {
    margin-left: 0.5rem;
  }
}