Loading...
Loading...
> A search input component with built-in search icon, optional clear button, and loading state support.
1<InputSearch2 value={searchValue}3 onValueChange={setSearchValue}4 placeholder="Search..."5/>
1<InputSearch2 value={loadingValue}3 onValueChange={handleLoadingSearch}4 loading={isLoading}5 placeholder="Search with loading..."6/>
1<InputSearch2 value={searchValue}3 onValueChange={setSearchValue}4 showClearButton={false}5 placeholder="No clear button..."6/>
1<InputSearch2 value="Disabled search"3 disabled4 placeholder="Disabled..."5/>
1<InputSearch2 value={searchValue}3 onValueChange={setSearchValue}4 onClear={() => console.log("Cleared!")}5 placeholder="Search with clear handler..."6/>
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | The controlled value of the input |
| onValueChange | (value: string) => void | - | Callback when the value changes |
| onClear | () => void | - | Optional callback when clear button is clicked |
| loading | boolean | false | Show loading spinner instead of clear button |
| showClearButton | boolean | true | Whether to show the clear button when input has value |
| disabled | boolean | - | Disable the input |
| placeholder | string | - | Placeholder text |