input search

The search input element let the user enter search queries into.

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

This component works with all its features only in browsers that have support for the :has CSS selector. Please refer to the reference on MDN.
If you need to run this component in a browser with no support for the :has CSS selector, please use the FROK Release 3.6.x.
table of content

component variations

input search

Open on blank page
<div class="a-search-input">
  <input type="search" id="search-input-1" name="input search" />
  <button type="button" class="a-search-input__icon-close">
    <i class="a-icon ui-ic-close-small"></i>
  </button>
  <button type="submit" class="a-search-input__icon-search" aria-label="Search">
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search readonly

Open on blank page
<div class="a-search-input">
  <input
    type="search"
    id="search-input-2"
    name="input search readonly"
    readonly=""
    value="Search term"
  />
  <button type="button" class="a-search-input__icon-close">
    <i class="a-icon ui-ic-close-small"></i>
  </button>
  <button
    type="submit"
    class="a-search-input__icon-search"
    disabled=""
    aria-label="Search"
  >
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search disabled

Open on blank page
<div class="a-search-input">
  <input
    type="search"
    id="search-input-3"
    name="input search disabled"
    disabled=""
    value="Search term"
  />
  <button type="button" class="a-search-input__icon-close">
    <i class="a-icon ui-ic-close-small"></i>
  </button>
  <button
    type="submit"
    class="a-search-input__icon-search"
    disabled=""
    aria-label="Search"
  >
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with label

Open on blank page
<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="input search with label" />
  <button type="button" class="a-search-input__icon-close">
    <i class="a-icon ui-ic-close-small"></i>
  </button>
  <button type="submit" class="a-search-input__icon-search" aria-label="Search">
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with label readonly

Open on blank page
<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="input search with label readonly"
    readonly=""
    value="Search term"
  />
  <button type="button" class="a-search-input__icon-close">
    <i class="a-icon ui-ic-close-small"></i>
  </button>
  <button
    type="submit"
    class="a-search-input__icon-search"
    disabled=""
    aria-label="Search"
  >
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with label disabled

Open on blank page
<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="input search with label disabled"
    disabled=""
    value="Search term"
  />
  <button type="button" class="a-search-input__icon-close">
    <i class="a-icon ui-ic-close-small"></i>
  </button>
  <button
    type="submit"
    class="a-search-input__icon-search"
    disabled=""
    aria-label="Search"
  >
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with very long label

Open on blank page
<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="input search with very long label"
  />
  <button type="button" class="a-search-input__icon-close">
    <i class="a-icon ui-ic-close-small"></i>
  </button>
  <button type="submit" class="a-search-input__icon-search" aria-label="Search">
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with very long label readonly

Open on blank page
<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="input search with very long label readonly"
    readonly=""
    value="Search term"
  />
  <button type="button" class="a-search-input__icon-close">
    <i class="a-icon ui-ic-close-small"></i>
  </button>
  <button
    type="submit"
    class="a-search-input__icon-search"
    disabled=""
    aria-label="Search"
  >
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with very long label disabled

Open on blank page
<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="input search with very long label disabled"
    disabled=""
    value="Search term"
  />
  <button type="button" class="a-search-input__icon-close">
    <i class="a-icon ui-ic-close-small"></i>
  </button>
  <button
    type="submit"
    class="a-search-input__icon-search"
    disabled=""
    aria-label="Search"
  >
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with placeholder

Open on blank page
<div class="a-search-input">
  <input
    type="search"
    id="search-input-10"
    name="input search 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>
  <button type="submit" class="a-search-input__icon-search" aria-label="Search">
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with placeholder readonly

Open on blank page
<div class="a-search-input">
  <input
    type="search"
    id="search-input-11"
    name="input search 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>
  <button
    type="submit"
    class="a-search-input__icon-search"
    disabled=""
    aria-label="Search"
  >
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with placeholder disabled

Open on blank page
<div class="a-search-input">
  <input
    type="search"
    id="search-input-12"
    name="input search 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>
  <button
    type="submit"
    class="a-search-input__icon-search"
    disabled=""
    aria-label="Search"
  >
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with placeholder and label

Open on blank page
<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="input search 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>
  <button type="submit" class="a-search-input__icon-search" aria-label="Search">
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with placeholder and label readonly

Open on blank page
<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="input search 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>
  <button
    type="submit"
    class="a-search-input__icon-search"
    disabled=""
    aria-label="Search"
  >
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with placeholder and label disabled

Open on blank page
<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="input search 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>
  <button
    type="submit"
    class="a-search-input__icon-search"
    disabled=""
    aria-label="Search"
  >
    <i class="a-icon ui-ic-search"></i>
  </button>
</div>

input search with hidden search button

Open on blank page
<div class="a-search-input">
  <input
    type="search"
    id="search-input-16"
    name="input search with hidden search button"
  />
  <button type="button" class="a-search-input__icon-close">
    <i class="a-icon ui-ic-close-small"></i>
  </button>
</div>

input search with hidden search button and very long label

Open on blank page
<div class="a-search-input">
  <label for="search-input-17">
    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-17"
    name="input search with hidden search button and very long label"
  />
  <button type="button" class="a-search-input__icon-close">
    <i class="a-icon ui-ic-close-small"></i>
  </button>
</div>

additional content

Instance API

The instance API can be accessed by the component property of the searchForm element.

Method parameter description
setAlwaysShowCloseButton(show) show: boolean wether to always show the close button or not, independent from the input value

styles SCSS

.a-search-input {
  display: flex;

  @include text-field;

  input {
    &[readonly] {
      ~.a-search-input__icon-search {
        background-color: var(--plain__enabled__fill__default);
        color: var(--plain__enabled__front__default);
        border-bottom-color: var(--plain__enabled__front__default);
        pointer-events: none;
      }
    }
  }

  &__icon-close {
    display: none;
  }

  &__icon-search {
    display: flex;
  }

  label {

    // for hideSearchButton = true -> without icon, width can be 3rem more
    &:not(:has(~ .a-search-input__icon-search)) {
      max-width: calc(100% - 2rem);
    }
  }

  &.--close-visible &__icon-close {
    display: flex;
  }

  &.--close-visible label {
    max-width: calc(100% - 8rem);

    // for hideSearchButton = true -> without icon, width can be 3rem more
    &:not(:has(~ .a-search-input__icon-search)) {
      max-width: calc(100% - 5rem);
    }
  }
}```