SearchInput

import { SearchInput } from '@tangible/ui';

Interactive docs and examples: SearchInput in Storybook.

SearchInput props

Prop	Type	Default	Description
`className?`	`string`		Additional class name applied to the root wrapper element.
`clearLabel?`	`string`	`'Clear search'`	Accessible label for the clear button.
`defaultValue?`	`string`		Initial value (uncontrolled).
`hideClear?`	`boolean`	`false`	Hide the clear button entirely (e.g. when search runs live and clearing has no meaning).
`inputClassName?`	`string`		Class name applied directly to the `<input>` element. Use for utilities like `tui-input-reset` (removes browser-native search decoration, clear buttons, and spinners) that must target the input itself.
`onClear?`	`() => void`		Called when the clear button is pressed, after the value is reset.
`onSearch?`	`(value: string) => void`		Called with the current value when the search is submitted — pressing Enter in the field or activating the submit button.
`onValueChange?`	`(value: string) => void`		Called with the current string value on every change — typing and the clear button alike (clearing fires it with `''`).
`searchIcon?`	`ReactNode`		Override the leading icon. Defaults to the `system/search` glyph.
`searchLabel?`	`string`	`'Search'`	Accessible label for the submit button (only rendered when `onSearch` is set).
`size?`	`"lg" \| "md" \| "sm"`	`'md'`	Control size.
`value?`	`string`		Current value (controlled).

Also accepts the standard attributes of InputHTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.

Stories: Basic, Controlled, Sizes, Hide Clear, Custom Icon, Live Filtering, With Submit, With Field, Disabled (interactive page).

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.