Search input

Search inputs are used for inputting words or phrases and locating relevant content.

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>

Autocomplete

Use the mode="autocomplete" attribute to enable autocomplete functionality. To fully implement the autocomplete field, you must provide a list of menu items by setting the menuItems property to the input search field, as in the example below.

<div class="chi-form__item">
  <chi-search-input id="example__autocomplete" mode="autocomplete"></chi-search-input>
</div>

<script>
  const input = document.getElementById("example__autocomplete");

  input.menuItems = [
    { title: "Item 1", href: "#" },
    { title: "Item 2", href: "#" },
    { title: "Item 3", href: "#" },
    { title: "Item 4", href: "#" },
    { title: "Item 5", href: "#" }
  ];
</script>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<div class="chi-dropdown">
   <div id="with-dropdown" 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>
   </div>
   <div class="chi-dropdown__menu">
      <a class="chi-dropdown__menu-item" href="#">Item 1</a>
      <a class="chi-dropdown__menu-item" href="#">Item 2</a>
      <a class="chi-dropdown__menu-item" href="#">Item 3</a>
      <a class="chi-dropdown__menu-item" href="#">Item 4</a>
   </div>
</div>

<script>
  chi.dropdown(document.getElementById('with-dropdown'));
</script>

Sizes

Search input supports the following sizes: xs, sm, md, lg, xl. The default size is md.

<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.

<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>

Web Component

Properties

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	To disable Search input	`boolean`	`false`
`menuItems`	--	To set the list of items to be used in the dropdown menu in autocomplete mode	`DropdownMenuItem[]`	undefined
`mode`	`mode`	To set the mode to search input	`"autocomplete"`	undefined
`name`	`name`	To define name of Search input	`string`	undefined
`placeholder`	`placeholder`	To define placeholder of Search input	`string`	undefined
`preventValueMutation`	`prevent-value-mutation`	To disable Value attribute mutation	`boolean`	`false`
`readonly`	`readonly`	To render Search Input in readonly mode	`boolean`	`false`
`size`	`size`	To define size of Search input	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`
`value`	`value`	To define value of Search input	`string`	`''`

Events

Event	Description	Type
`chiBlur`	Triggered when the element has lost focus.	`CustomEvent<any>`
`chiChange`	Triggered when an alteration to the element's value is committed by the user	`CustomEvent<string>`
`chiClean`	Triggered when the user clicked the X button.	`CustomEvent<any>`
`chiFocus`	Triggered when the user sets focus on the element.	`CustomEvent<any>`
`chiInput`	Triggered when the user changed the element's value but did not commit the change yet	`CustomEvent<string>`
`chiSearch`	Triggered when the user clicked the Search button.	`CustomEvent<any>`

Chi Vue

Props

Property	Description	Type	Default
`disabled`	To disable Search input	`boolean`	`false`
`name`	To define name of Search input	`string`	undefined
`placeholder`	To define placeholder of Search input	`string`	undefined
`portal`	To enable portal styling	`boolean`	`false`
`size`	To define size of Search input	`"lg" \| "md" \| "sm" \| "xl"`	`'md'`
`value`	To define value of Search input	`string`	`''`

Events

Event	Description	Type
`chiBlur`	Triggered when the element has lost focus.	`CustomEvent<any>`
`chiChange`	Triggered when an alteration to the element's value is committed by the user	`CustomEvent<string>`
`chiClean`	Triggered when the user clicked the X button.	`CustomEvent<any>`
`chiFocus`	Triggered when the user sets focus on the element.	`CustomEvent<any>`
`chiInput`	Triggered when the user changed the element's value but did not commit the change yet	`CustomEvent<string>`
`chiSearch`	Triggered when the user clicked the Search button.	`CustomEvent<any>`

Accessibility

Accessibility guidelines coming soon