SearchInput supplies a search icon and text input. onValueChange receives the new string; onChange receives the native React change event. Filtering, fetching, and debouncing belong to your application.
aria-label or aria-labelledby for an accessible name. filterDropdown receives a filter button that you can compose with a Dropdown trigger using render. Supply filterButtonAriaLabel to name that action. disabled disables the text input; configure the optional filter controls separately.
Native input props, className, style, and ref apply to the input itself. The shared InputGroup owns the search adornment and focus treatment. Use size="sm" for a compact search field.
Props
string
Accessible name when aria-labelledby is absent.
string
ID of the element that labels the input. Takes precedence over aria-label.
boolean
Focuses the input when mounted.
string | ((state: InputState) => string | undefined)
Class applied to the input.
string | number | readonly string[]
The default value of the input. Use when uncontrolled.
boolean
Disables the text input. Configure filter popup controls separately.
string
default:"Filter"
Accessible label for the optional filter button.
((filterButton: ReactElement<unknown, string | JSXElementConstructor<any>>) => ReactNode)
Renders a filter popup around the supplied filter button.
string
Input ID, generated when omitted.
((event: BaseUIEvent<ChangeEvent<HTMLInputElement, HTMLInputElement>>) => void)
Native input change event handler.
((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)
Called with the new text. The application owns filtering.
string
Hint shown when the input is empty. Also used as the accessible name if no explicit label is supplied.
Ref<HTMLInputElement>
Ref to the native input element.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, InputState>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render."md" | "sm"
default:"md"
Visual size of the input group and optional filter button.
CSSProperties | ((state: InputState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
string | number | readonly string[]
Current search text.