Search input
Examples
Base
<div class="chi-form__item">
<chi-search-input></chi-search-input>
</div>
<div class="chi-form__item">
<ChiSearchInput />
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input" 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" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></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 value="Sample Text" disabled></chi-search-input>
</div>
<div class="chi-form__item">
<ChiSearchInput value="Sample Text" disabled />
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input" 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" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
Sizes
Search input supports the following sizes: xs
, sm
, md
,
lg
, xl
.
The default size is md
.
xs
sm
md
lg
xl
<div class="chi-form__item">
<chi-search-input size="xs" value="Sample Text"></chi-search-input>
</div>
<div class="chi-form__item">
<chi-search-input size="sm" value="Sample Text"></chi-search-input>
</div>
<div class="chi-form__item">
<chi-search-input size="md" value="Sample Text"></chi-search-input>
</div>
<div class="chi-form__item">
<chi-search-input size="lg" value="Sample Text"></chi-search-input>
</div>
<div class="chi-form__item">
<chi-search-input size="xl" value="Sample Text"></chi-search-input>
</div>
<div class="chi-form__item">
<ChiSearchInput value="Sample Text" size="xs" />
</div>
<div class="chi-form__item">
<ChiSearchInput value="Sample Text" size="sm" />
</div>
<div class="chi-form__item">
<ChiSearchInput value="Sample Text" size="md" />
</div>
<div class="chi-form__item">
<ChiSearchInput value="Sample Text" size="lg" />
</div>
<div class="chi-form__item">
<ChiSearchInput value="Sample Text" size="xl" />
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input -xs" type="search" value="Sample text" aria-label="search input" />
<button class="chi-button -icon -flat -xs -bg--none" aria-label="Search">
<div class="chi-button__content">
<i class="chi-icon icon-search" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -close -xs" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input -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" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></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" 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" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></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" 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" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></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" 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" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
Sizes
Search input supports the following sizes: xs
, sm
, md
,
lg
.
The default size is md
.
xs
sm
md
lg
<div class="chi-form__item">
<chi-search-input size="xs" value="Sample Text"></chi-search-input>
</div>
<div class="chi-form__item">
<chi-search-input size="sm" value="Sample Text"></chi-search-input>
</div>
<div class="chi-form__item">
<chi-search-input size="md" value="Sample Text"></chi-search-input>
</div>
<div class="chi-form__item">
<chi-search-input size="lg" value="Sample Text"></chi-search-input>
</div>
<div class="chi-form__item">
<ChiSearchInput value="Sample Text" size="xs" />
</div>
<div class="chi-form__item">
<ChiSearchInput value="Sample Text" size="sm" />
</div>
<div class="chi-form__item">
<ChiSearchInput value="Sample Text" size="md" />
</div>
<div class="chi-form__item">
<ChiSearchInput value="Sample Text" size="lg" />
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input -xs" type="search" value="Sample text" aria-label="search input" />
<button class="chi-button -icon -flat -xs -bg--none" aria-label="Search">
<div class="chi-button__content">
<i class="chi-icon icon-search" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -close -xs" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="chi-form__item">
<div class="chi-input__wrapper -icon--right">
<input class="chi-input chi-search__input -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" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></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" 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" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></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" 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" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon -close -sm" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x" aria-hidden="true"></i>
</div>
</button>
</div>
</div>