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.
table of content

component variations

search bar

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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

Open on blank page
<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;
  }
}