SearchField

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.

Import


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

Appearance

Sorry! There are currently no variants and sizes available.

Props

Property	Type	Default	Description
`label`	`ReactNode`	`none`	The label text. If you don't want to visually display a label, provide an `aria-label` or `aria-labelledby` attribute for accessibility.
`description`	`ReactNode`	`none`	A helpful text.
`errorMessage`	`ReactNode`	`none`	An error message.
`error`	`boolean`	`false`	If `true`, the field is considered invalid and if set the `errorMessage` is shown instead of the `description`.
`value`	`string`	`none`	The value of the input field.
`disabled`	`boolean`	`false`	If `true`, the input is disabled.
`required`	`boolean`	`false`	If `true`, the input is required
`validationState`	`ValidationState`	`none`	Whether the input should display its "valid" or "invalid" visual styling.
`autoFocus`	`boolean`	`none`	Whether the element should receive focus on render.
`autoComplete`	`string`	`none`	Describes the type of autocomplete functionality the input should provide if any.
`readOnly`	`boolean`	`false`	If `true`, the input is readOnly.
`type`	`string`	`text`	The type of the input field.
`onChange`	`function`	`none`	A callback function that is called with the input's current value when the input `value` changes.
`width`	`string \| number`	`full`	Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width