Search input

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

Examples

Base

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

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

Web Component

Properties

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	To disable Search input	`boolean`	`false`
`name`	`name`	To define name of Search input	`string`	undefined
`placeholder`	`placeholder`	To define placeholder of Search input	`string`	undefined
`portal`	`portal`	To enable portal styling	`boolean`	`false`
`preventValueMutation`	`prevent-value-mutation`	To disable Value attribute mutation	`boolean`	`false`
`size`	`size`	To define size of Search input	`"lg" \| "md" \| "sm" \| "xl"`	`'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>`

Accessibility

Accessibility guidelines coming soon