Base

Class	Description
.ui-search-input	Base class

Size

Class	Value
.ui-search-input--sm	sm
.ui-search-input--lg	lg

Block

Class	Description
.ui-search-input--block	block

Disabled

Class	Description
.ui-search-input--disabled	disabled

Has-clear

Class	Description
.ui-search-input--has-clear	has-clear

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-search-input-height	var(--ui-row-2)	Overall height
--ui-search-input-padding-x	var(--ui-space-1)	Horizontal padding
--ui-search-input-font-size	var(--ui-font-size-sm)	Font size
--ui-search-input-radius	var(--ui-radius-md)	Corner radius
--ui-search-input-bg	var(--ui-color-bg)	Background color
--ui-search-input-border-color	var(--ui-color-border-strong)	Border color
--ui-search-input-border-color-focus	var(--ui-color-primary)	Border color focus
--ui-search-input-text	var(--ui-color-text)	Text
--ui-search-input-placeholder	var(--ui-color-text-muted)	Placeholder
--ui-search-input-icon-color	var(--ui-color-text-muted)	Icon color
--ui-search-input-icon-size	var(--ui-size-md)	Icon dimensions
--ui-search-input-clear-color	var(--ui-color-text-muted)	Clear color
--ui-search-input-clear-hover-bg	var(--ui-color-bg-muted)	Clear hover bg
--ui-search-input-height-sm	calc(var(--ui-row) * 1.5)	Overall height at small size
--ui-search-input-font-size-sm	var(--ui-font-size-xs)	Font size at small size
--ui-search-input-icon-size-sm	var(--ui-size-sm)	Icon dimensions at small size
--ui-search-input-height-lg	calc(var(--ui-row) * 2.5)	Overall height at large size
--ui-search-input-padding-x-lg	var(--ui-space-2)	Horizontal padding at large size
--ui-search-input-font-size-lg	var(--ui-font-size-md)	Font size at large size
--ui-search-input-icon-size-lg	var(--ui-size-lg)	Icon dimensions at large size

<div class="ui-search-input ui-search-input--has-clear">
  <span class="ui-search-input__icon">
    <svg viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"></circle>
      <path d="m21 21-4.3-4.3"></path>
    </svg>
  </span>
  <input class="ui-search-input__field" type="search" value="Design tokens"></input>
  <button class="ui-search-input__clear" type="button" aria-label="Clear search">
    <svg viewBox="0 0 24 24">
      <path d="M18 6 6 18"></path>
      <path d="m6 6 12 12"></path>
    </svg>
  </button>
</div>

<div class="ui-search-input ui-search-input--sm">
  <span class="ui-search-input__icon">
    <svg viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"></circle>
      <path d="m21 21-4.3-4.3"></path>
    </svg>
  </span>
  <input class="ui-search-input__field" type="search" placeholder="Small"></input>
</div>
<div class="ui-search-input">
  <span class="ui-search-input__icon">
    <svg viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"></circle>
      <path d="m21 21-4.3-4.3"></path>
    </svg>
  </span>
  <input class="ui-search-input__field" type="search" placeholder="Default"></input>
</div>
<div class="ui-search-input ui-search-input--lg">
  <span class="ui-search-input__icon">
    <svg viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"></circle>
      <path d="m21 21-4.3-4.3"></path>
    </svg>
  </span>
  <input class="ui-search-input__field" type="search" placeholder="Large"></input>
</div>

<!-- Full-width layout. -->
<div class="ui-search-input ui-search-input--block">
  <span class="ui-search-input__icon">
    <svg viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"></circle>
      <path d="m21 21-4.3-4.3"></path>
    </svg>
  </span>
  <input class="ui-search-input__field" type="search" placeholder="Full width search..."></input>
</div>

<div class="ui-search-input ui-search-input--disabled">
  <span class="ui-search-input__icon">
    <svg viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"></circle>
      <path d="m21 21-4.3-4.3"></path>
    </svg>
  </span>
  <input class="ui-search-input__field" type="search" placeholder="Disabled" disabled></input>
</div>