Components

Search Input

Allows users to enter a search query. Wraps a text input in a search form with a built-in clear button.

Replacing soon

Anatomy

import {SearchInput} from '@staffbase/design';

<SearchInput />;

Use height="32px" for compact layouts.

SearchInput accepts all standard HTML <input> attributes in addition to the props below.

Name	Type	Description
`onClear`	`() => void`	Called when the clear (×) button is clicked. Use this to reset the input value.
`onSubmit`	`() => void`	Called when the search form is submitted (e.g. Enter key pressed).
`height`	`32px40px`	Controls the height of the search input. Default:`'40px'`
`cancelButtonTitle`	`string`	The `title` and `aria-label` of the clear button. Default:`'Cancel'`
`autoFocus`	`boolean`	Focuses the input on mount. Default:`false`
`inputRef`	`RefObject<HTMLInputElement>`	Ref for the underlying `<input>` element.

Always handle onClear to reset the input value so the clear button behaves correctly.
Use onSubmit to trigger search when the user presses Enter, rather than listening for keyDown events manually.
Use height="32px" in dense layouts such as toolbars or sidebars. Prefer the default 40px in most contexts.
Provide a descriptive placeholder that communicates what can be searched, e.g. “Search users” rather than just “Search”.