components

Search Input

Primary Search Input

 
  • <div class="lp__primary_search">
<label class="input_text" for="primary_inputs">INPUT FIELD</label>
<form class="lp__search" action="" name="">
    <input type="search" name="" value="Enter Name" id="primary_inputs" />
    <input type="image" value="Search" class="input-type-img" src="/assets/img/search-orange.svg" alt="Search" />
</form>
</div>
<div class="lp__primary_search">
<label class="input_text" for="input-type-focus">HINT TEXT</label>
<form class="lp__search" action="" name="">
    <input type="search" name="" id="input-type-focus" value="Enter Name" autofocus />
    <input type="image" value="Search" class="input-type-img" src="/assets/img/search-orange.svg" alt="Search" />
</form>
</div>
<div class="lp__primary_search" disabled>
<label class="input_text" for="input-type-disabled">INPUT FIELD DISABLED</label>
<form class="lp__search" action="" name="">
    <input type="search" name="" id="input-type-disabled" value="Enter Name" disabled="disabled" /> 
    <input type="image" value="Search" class="input-type-img" src="/assets/img/search-orange.svg" alt="Search" disabled="disabled" />
</form>
</div>
  • Search fields are a styled in the same way as text fields with the addition of a search icon to the right which initiates the search function. Search functions are used in many instances beyond webforms.
  • EXAMPLE

Primary Inverse Search Input

Secondary Search Input
Secondary Inverse Search Input
 
  • <div class="lp__secondary_search">
<label class="input_text" for="secondary_search">INPUT FIELD</label>
<form class="lp__search" action="" name="">
    <input type="search" name="" value="Enter Name" id="secondary_search" />
    <input type="image" value="Search-4" class="input-type-img" src="/assets/img/search-orange.svg" alt="Search-4" />
</form>
</div>
<div class="lp__secondary_search">
<label class="input_text" for="secondary_search_focus">HINT TEXT</label>
<form class="lp__search" action="" name="">
    <input type="search" name="" id="secondary_search_focus" value="Enter Name" autofocus />
    <input type="image" value="Search-5" class="input-type-img" src="/assets/img/search-orange.svg" alt="Search-5" />
</form>
</div>
<div class="lp__secondary_search" disabled>
<label class="input_text" for="secondary_search_disabled">INPUT FIELD DISABLED</label>
<form class="lp__search" action="" name="">
    <input type="search" name="" id="secondary_search_disabled" value="Enter Name" disabled="disabled" /> 
    <input type="image" value="Search-6" class="input-type-img" src="/assets/img/search-orange.svg" alt="Search-6" disabled="disabled" />
</form>
</div>
<div class="lp__secondary_search secondary_inverse_search">
<label class="input_text" for="secondary_search-1">INPUT FIELD</label>
<form class="lp__search" action="" name="">
    <input type="search" name="" value="Enter Name" id="secondary_search-1" />
    <input type="image" value="Search-7" class="input-type-img" src="/assets/img/search-orange.svg" alt="Search-7" />
</form>
</div>
<div class="lp__secondary_search secondary_inverse_search">
<label class="input_text" for="secondary_search_focus-1">HINT TEXT</label>
<form class="lp__search" action="" name="">
    <input type="search" name="" id="secondary_search_focus-1" value="Enter Name" autofocus />
    <input type="image" value="Search-8" class="input-type-img" src="/assets/img/search-orange.svg" alt="Search-8" />
</form>
</div>
<div class="lp__secondary_search secondary_inverse_search" disabled>
<label class="input_text" for="secondary_search_disabled-1">INPUT FIELD DISABLED</label>
<form class="lp__search" action="" name="">
    <input type="search" name="" id="secondary_search_disabled-1" value="Enter Name" disabled="disabled" /> 
    <input type="image" value="Search-9" class="input-type-img" src="/assets/img/search-orange.svg" alt="Search-9" disabled="disabled" />
</form>
</div>
  • DESIGNER
  • EXAMPLE