Search field with clear control, icon placement, background fill, and hover border.
Also known as: search bar, SearchBar, search field, search box
Install with the CLI, or copy the component source into your project.
Add search-input (npm)
1npx --yes -p @default-file/ui df-ui add search-input
Search field with clear control.
Same field, search icon on the left or right.
Small, medium, and large.
Inherits the theme hover border. Override with hoverBorderColor, or set hoverBorder false.
Override the field fill with background. Sets --df-input-bg and replaces the default and pill recipes.
Search field with clear control, sizes, icon placement, background fill, and Input hover border controls. Block padding stays equal; Input optical shift is disabled. 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. |
| background | string | - | Field fill. Prefer tokens such as var(--muted). Forwards to Input, sets --df-input-bg, and overrides the default and pill recipes for resting and filled states. |
| hoverBorder | boolean | - | Forwards to Input. Omit to inherit the theme. Set false to keep the resting border. Set true to force the hover border on. |
| hoverBorderColor | string | - | Forwards to Input. Hover border color when hover is active. Prefer tokens such as var(--foreground). Sets --df-input-hover-border. |
| inputClassName | string | - | Classes on the inner input element. |
| className | string | - | Classes on the outer search shell. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-input-bg | CSS color | var(--background) | Resolved field fill on the inner Input. Set by variant recipes or the background prop. |
| --df-search-input-bg | CSS color | color-mix(in oklch, var(--muted) 50%, var(--background)) | Pill resting fill recipe. Mapped to --df-input-bg unless background is set. |
| --df-search-input-bg-filled | CSS color | color-mix(in oklch, var(--muted) 70%, var(--background)) | Pill filled fill recipe. Mapped to --df-input-bg unless background is set. |
| --input | CSS color | var(--df-neutral-100) | Field border. |
| --border | CSS color | var(--df-neutral-100) | Fallback border. |
| --df-hover-border | CSS keyword | on | Theme field hover border. on paints the ink hover border; off keeps the resting border. Runtime gating uses data-df-hover-border on html. Set with df-ui init --hover-border. Default on. |
| --df-input-hover-border | CSS color | var(--foreground) | Hover border on the inner Input when the theme or instance enables hover. Defaults to the ink foreground. Override with hoverBorderColor. |
| --muted-foreground | CSS color | var(--df-neutral-500) | Icon and placeholder color. |
| --spacing-unit | CSS length | 0.25rem | Base unit for padding and gap. |
| --df-corner-shape | CSS corner-shape | var(--df-corner-shape-round) | Theme corner curve for all kit chrome. round = circular arcs; smooth = continuous squircle. Set with df-ui init --corner-shape, or override on :root. Default round. |