# SearchInput

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

Interactive docs and examples: [SearchInput in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/forms-searchinput--docs).

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

## Examples

Stories: Basic, Controlled, Sizes, Hide Clear, Custom Icon, Live Filtering, With Submit, With Field, Disabled ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/forms-searchinput--docs)).

## Component API tokens

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

- `--tui-search-input-button-radius`

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/forms-searchinput--docs