Marigold
Marigold

Application

MarigoldProvider
RouterProvider

Layout

AppLayoutbeta
Aside
Aspect
Breakout
Center
Columns
Container
Grid
Inline
Inset
Scrollable
Split
Stack
Tiles

Actions

ActionBaralpha
Button
Link
LinkButton
ToggleButtonalpha
ToggleButtonGroupalpha

Form

Autocomplete
Calendarupdated
Checkbox
ComboBox
DateField
DatePicker
FileField
Form
Multiselectdeprecated
NumberField
Radio
SearchField
Select
Slider
Switch
TagFieldbeta
TextArea
TextField
TimeField

Collection

SelectList
Tableupdated
Tag

Navigation

Accordion
Breadcrumbs
Pagination
Sidebarbeta
Tabs
TopNavigationbeta

Overlay

ContextualHelp
Dialog
Drawer
Menu
Toastbeta
Tooltip

Content

Badge
Card
Divider
EmptyStatebeta
Headline
Icon
List
Loader
SectionMessage
SVG
Text

Formatters

DateFormat
NumericFormat

Hooks and Utils

cn
cva
extendTheme
parseFormData
useAsyncListData
useListData
useResponsiveValue
useTheme
VisuallyHidden
Components

SearchField

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

The <SearchField> component offers a user-friendly input field specifically designed for search queries, often accompanied by a search icon or button to initiate the search action.

Anatomy

A <SearchField> consists of an input element, a label, and an optional clear button.

Anatomy of search field

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

The selected theme does not has any options for"variant" and "size".
PropertyTypeDescription
variant-The available variants of this component.
size-The available sizes of this component.

Usage

The <SearchField> component is a versatile UI element that enables users to search for specific information within a given context or data set.

Placement

The placement of a search field plays a critical role in its effectiveness and usability. A well-positioned search field ensures users can easily find and use it, enhancing their overall experience on a website or application.

Do
Do: Position the search field prominently
Position the search field prominently.
Don't
Don't place the search field in an obscure location

Don't place the search field in an obscure location.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
View SearchField stories

SearchField

Prop

Type

Related

Form development guide

This page should introduce you on how to build forms with Marigold.

Form Fields

Here you can find a comprehensive guide for working with form fields.
Last update: 10 days ago

Radio

Component which allows to select only one option from a list.

Select

Dropdown for selecting an option among different options.

On this page

AnatomyAppearanceUsagePlacementPropsSearchFieldRelated