CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal

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>

With Dropdown

Item 1Item 2Item 3Item 4
<div class="chi-form__item">
  <chi-search-input id="example__with_dropdown"></chi-search-input>
  <chi-dropdown id="example__dropdown" position="bottom" prevent-auto-hide>
    <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 1</a>
    <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 2</a>
    <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 3</a>
    <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 4</a>
  </chi-dropdown>
</div>

<script>
  const input = document.getElementById("example__with_dropdown");
  const dropdown = document.getElementById("example__dropdown");

  input.addEventListener("chiFocus", () => {
    dropdown.show();
  });

  input.addEventListener("chiBlur", () => {
    dropdown.hide();
  });
</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.

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>

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