ExtendedSearchBox

ExtendedSearchBox is a search input with an optional dropdown to switch the search type (by text or by ID). It reports the committed value through onChange and supports localization of its UI strings.

When to use

• A search field where users may search different ways (free text vs. a record ID).
• Any list/table filter box (it pairs with DataTable's searchBoxProps).

Import

import { ExtendedSearchBox } from '@spartanfx/react';

Basic usage

onChange is required and fires when a value is submitted or cleared.

<ExtendedSearchBox
  placeholder="Search projects…"
  onChange={(value) => setQuery(value)}
/>

Search-type menu

import { ExtendedSearchBox, SearchTypes } from '@spartanfx/react';

<ExtendedSearchBox
  showSearchTypeMenu
  searchType={SearchTypes.searchById}
  fullWidth
  onChange={setQuery}
/>

Key props

Prop	Type	Default	Notes
onChange (required)	(newValue) => void	—	Fires on submit/clear.
placeholder	string	'Search...'	Placeholder text.
showSearchTypeMenu	boolean	true	Show the by-text/by-id dropdown.
searchType	SearchTypes	searchByText	Current mode.
fullWidth	boolean	false	Expand to fill available width.
disabled	boolean	false	Disable the box.
translate	(text) => string	—	Localize UI strings.

See the full generated reference: ExtendedSearchBox API ↗.

See also

• DataTable
• Components overview