Search fields with clear control, pill shape, and start or end icon placement.
Add this item from the registry, or import it from the package after installing Default File UI.
Registry path
itsvigneshv/default-file-ui/search-inputPackage import
import { SearchInput } from "@default-file/ui/components/df-search-input"Search field with clear control.
Same field, search icon on the left or right.
Small, medium, and large.
Search field with clear control, sizes, and start or end icon placement. SearchBar is an alias.
| Prop | Type | Default | Notes |
|---|---|---|---|
| variant | "default" | "pill" | "default" | Field shape. |
| size | "sm" | "md" | "lg" | "md" | T-shirt height and type size. |
| iconPosition | "start" | "end" | "start" | Side for the leading search icon. |
| leadingIcon | ReactNode | false | — | Override or hide the default search icon. |
| trailing | ReactNode | — | Custom trailing slot beside clear when present. |
| clearable | boolean | true | Show a clear control when the field has a value. |
| onClear | () => void | — | Called when the clear control is activated. |
| inputClassName | string | — | Classes on the inner input element. |
| className | string | — | Classes on the outer search shell. |
| …input attributes | Input attrs (minus size, className) | — | value, placeholder, onChange, disabled, aria-label, etc. |