Search input
Examples
Base
<div class="chi-form__item">
<chi-search-input id="example__base"></chi-search-input>
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input" id="example__base" type="search" aria-label="search input" />
<button class="chi-button -icon -flat -bg--none" aria-label="Search">
<div class="chi-button__content">
<i class="chi-icon icon-search"></i>
</div>
</button>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
</div>
Disabled
Use the disabled
boolean attribute to prevent users from interacting with a search input.
Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus.
Note: The required attribute can not be used on inputs with a disabled attribute specified.
<div class="chi-form__item">
<chi-search-input id="example__disabled" value="Sample Text" disabled></chi-search-input>
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input" id="example__disabled" type="search" value="Sample text" disabled="disabled" aria-label="search input" />
<button class="chi-button -icon -flat -bg--none" aria-label="Search">
<div class="chi-button__content">
<i class="chi-icon icon-search"></i>
</div>
</button>
<button class="chi-button -icon -close" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
</div>
Sizes
Search inputs supports the following sizes: sm
, md
,
lg
, xl
.
The default size is md
.
<div class="chi-form__item">
<chi-search-input size="sm" value="Sample Text" id="example__size-sm"></chi-search-input>
</div>
<div class="chi-form__item">
<chi-search-input size="md" value="Sample Text" id="example__size-md"></chi-search-input>
</div>
<div class="chi-form__item">
<chi-search-input size="lg" value="Sample Text" id="example__size-lg"></chi-search-input>
</div>
<div class="chi-form__item">
<chi-search-input size="xl" value="Sample Text" id="example__size-xl"></chi-search-input>
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input -sm" id="example__size-sm" type="search" value="Sample text" aria-label="search input" />
<button class="chi-button -icon -flat -sm -bg--none" aria-label="Search">
<div class="chi-button__content">
<i class="chi-icon icon-search"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input -md" id="example__size-md" type="search" value="Sample text" aria-label="search input" />
<button class="chi-button -icon -flat -md -bg--none" aria-label="Search">
<div class="chi-button__content">
<i class="chi-icon icon-search"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input -lg" id="example__size-lg" type="search" value="Sample text" aria-label="search input" />
<button class="chi-button -icon -flat -lg -bg--none" aria-label="Search">
<div class="chi-button__content">
<i class="chi-icon icon-search"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input -xl" id="example__size-xl" type="search" value="Sample text" aria-label="search input" />
<button class="chi-button -icon -flat -xl -bg--none" aria-label="Search">
<div class="chi-button__content">
<i class="chi-icon icon-search"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</div>
</div>