CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal
Lumen Rebrand24 Logo
Lumen Rebrand 24
Portal Rebrand24 Logo
Portal Rebrand 24

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>

Message

Use the helper-message attribute to provide users with additional information, validation feedback, and other helpful information.

<div class="chi-form__item">
  <chi-search-input helper-message="Optional helper message"></chi-search-input>
</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 class="chi-label -status">Optional helper message</div>
</div>

Error

Use the danger state to provide feedback to users when input data fails to validate. To meet accessibility requirements, danger inputs must include an error message explaining the failure and/or how to correct it.

<div class="chi-form__item">
  <chi-search-input id="example__danger" value="Unknown item" state="danger" helper-message="Item not found"></chi-text-input>
</div>
<div class="chi-form__item">
  <div class="chi-input__wrapper -icon--right">
    <input class="chi-input chi-search__input -danger" type="search" value="Unknown item" 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 class="chi-label -status -danger">
    <i class="chi-icon icon-circle-warning" aria-hidden="true"></i>
    Item not found
  </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. When autocomplete mode is active, the property visible-items, which allows to set numbers of items visible in the dropdown, is available.

<div class="chi-form__item">
  <chi-search-input id="example__autocomplete" mode="autocomplete" visible-items="3"></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" style="overflow-y: auto; max-height: 7rem">
      <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
helperMessage
helper-message
To display an additional helper text message below the Text input
string
undefined
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'
state
state
To define state color of Search input
"danger" | "success" | "warning"
undefined
value
value
To define value of Search input
string
''
visibleItems
visible-items
To provide number of items in the dropdown to be displayed, and apply scroll if needed
number
undefined

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<string>
chiSearchInputItemSelected
Triggered when the user clicked in one of the autocomplete elements
CustomEvent<DropdownMenuItem>

Methods

Method
Description
Returns
Parameters
hideList() => Promise<void>
Hide the autocomplete menu list

Type: Promise<void>

-
showList() => Promise<void>
Show the autocomplete menu list

Type: Promise<void>

-

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