Search Input

The SearchInput component provides a styled search field with clear and submit affordances.

Usage & Examples

Find components

search-with-button.tsx

<SearchInput
  label="Find components"
  defaultValue="chart"
  showSearchButton
/>

Search Input props API
				Default	Description
`autocomplete`	`boolean`	No	props	`false`	Controls whether autocomplete is enabled. Pass true for "on" or false for "off".
`className`	`string`	No	styling	`—`	Additional class name for the component root.
`clearAriaLabel`	`string`	No	props	`"Clear search"`	Accessible label for the clear button.
`clearButtonClassName`	`string`	No	props	`—`	Additional class name for the clear button.
`containerClassName`	`string`	No	props	`—`	Additional class name for the outer label/input container.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`defaultValue`	`string`	No	props	`""`	Initial search query for uncontrolled usage.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Whether to render glass styling.
`icon`	`SearchInputIconComponent \| null`	No	props	`—`	Optional icon component to render inside the search input. Pass null to hide the default search icon.
`iconClassName`	`string`	No	props	`—`	Additional class name for the rendered icon.
`iconPosition`	`"left" \| "right"`	No	props	`"left"`	Position of the icon relative to the input text.
`iconWrapperClassName`	`string`	No	props	`—`	Additional class name for the icon wrapper.