SearchInput

Use the SearchInput component for search queries. It includes a built-in Clear button for quick resets.

OverviewPropertiesUsage

Import

import { SearchInput } from '@dynatrace/strato-components/forms';

Demo

This is the simplest version of the SearchInput, which is uncontrolled and therefore handles its state internally. You can also set a specific initial value using the defaultValue prop. The SearchInput provides unified search styling and a built-in Clear button.

CodeSandbox

Control state

The SearchInput can also be controlled, meaning that you can handle the state. To do so, use the onChange prop to provide a handler that is called when the internal state of the SearchInput changes. You also need to assign the value from the state to the SearchInput by setting the value prop.

CodeSandbox

Add a suffix

The component also supports a SearchInput.Suffix. The suffix serves as a container at the end for an icon, some text, or a SearchInput.Button with a click handler. A divider is shown if there is both a suffix and a Clear button. In case of a large suffix area you might want to adjust the CSS min-width to avoid flickering with the conditionally shown clear button.

CodeSandbox

Variants

The SearchInput can be styled differently using the variant prop. The default visual representation is default, but can also be set to minimal.

CodeSandbox

Make the input read-only

The SearchInput can be set to read-only by simply adding the readOnly prop.

CodeSandbox

Validate

The SearchInput supports an error state, which can be triggered in two primary ways:

• Form submission: If the form containing the SearchInput is submitted with invalid or missing data, the component can reflect the error state.
• Validation function: Validation logic can be applied to determine whether the selected value meets the required criteria.

This example demonstrates how to show users a validation message using FormFieldMessages.

CodeSandbox

Navigate matches with a stepper

The SearchInput supports a SearchInput.Stepper subcomponent that lets you navigate through search matches. The stepper displays a match position indicator (for example, "1 / 5") along with previous and next buttons to cycle through results.

When the stepper is present, pressing Enter inside the input automatically advances to the next match, and pressing Shift+Enter returns to the previous match. The stepper buttons wrap around — if you navigate past the last match, the stepper returns to the first, and vice versa.

CodeSandbox