SearchInput

OverviewProperties

Import

import { SearchInput } from '@dynatrace/strato-components-preview/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 the 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.

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