Search Input

Boxed search input (icon only)

<input type="text" id="input-search-example" name="input-search-example" class=" input-text input-text--box input-text--search" placeholder="Enter search...">

Search form (input field with submit button)

<form method="get" action="#" class="search-form">
  <input id="search-form-example" name="search-form-example" type="text" placeholder="Enter search..." class="input-text input-text--box search-form__text">
  <button type="submit" class="btn icon icon--search-black search-form__submit">Submit</button>
</form>

Introduction

Basic input and variations used through the UIF.

Usage

Class name Effect Remarks
input[type=text|password|etc] Base styling for a text input box Required.
input[type=radio] Styles the radio button as per the UIF Required for radio buttons. Requires a label to follow the input
.input-text--box Placed on an input tag to make the input have a box around it Optional.
.input-text--search Placed on an input tag to include a search icon. Optional.
.search-form Placed on the form or wrapping tag that will contain and only contain a search input and submit button styled as an icon in the input. Optional.
.search-form__text Placed on the .input-text tag inside the .search-form block. Required if using .search-form
.search-form__submit Placed on the submit button inside the .search-form block. Required if using .search-form
.has-error Placed on an input tag to show there is an error.
May be placed on parent tag that will display error styles for all inputs. 		Optional.