Component which allows user to enter and clear a search query.

The <SearchField> component is a versatile UI element that enables users to search for specific information within a given context or data set. It offers a user-friendly input field specifically designed for search queries, often accompanied by a search icon or button to initiate the search action.

<SearchField> consists of an input element, a label, and an optional clear button. <SearchField> automatically manages the labeling and relationships between the elements, and handles keyboard events. Users can press the Escape key to clear the <SearchField>, or the Enter key to trigger the onSubmit event.



To import the component you just have to use this code below.

import { SearchField } from '@marigold/components';


Sorry! There are currently no variants and sizes available.


labelReactNodenoneThe label text. If you don't want to visually display a label, provide an `aria-label` or `aria-labelledby` attribute for accessibility.
descriptionReactNodenoneA helpful text.
errorMessageReactNodenoneAn error message.
errorbooleanfalseIf `true`, the field is considered invalid and if set the `errorMessage` is shown instead of the `description`.
valuestringnoneThe value of the input field.
disabledbooleanfalseIf `true`, the input is disabled.
requiredbooleanfalseIf `true`, the input is required
validationStateValidationStatenoneWhether the input should display its "valid" or "invalid" visual styling.
autoFocusbooleannoneWhether the element should receive focus on render.
autoCompletestringnoneDescribes the type of autocomplete functionality the input should provide if any.
readOnlybooleanfalseIf `true`, the input is readOnly.
typestringtextThe type of the input field.
onChangefunctionnoneA callback function that is called with the input's current value when the input `value` changes.
widthstring | numberfullSets the width of the field. You can see allowed tokens here:


Simple Search Field

This is how a basic <SearchField> looks like.

Disabled Search Field

If you want to implement a disabled <SearchField> you have to add the disabled property.

Required Search Field

The required property adds an required icon to the label.

Text Field with an Error

The example shows how to set the error and errorMessage properties. If you fill in the field correctly, it will disappear automatically.

Oops something went wrong

Text Field with readOnly