monday-ui-react-core/src/components/LegacySearch/__stories__/LegacySearch.mdx

Official monday.com UI resources for application development in React.js

import { Canvas, Meta } from "@storybook/blocks";
import { DeprecatedWarning, UsageGuidelines } from "vibe-storybook-components";
import {
  COMBOBOX,
  DROPDOWN,
  TEXT_FIELD
} from "../../../storybook/components/related-components/component-description-map";
import { TipCombobox } from "./LegacySearch.stories.helpers";
import * as LegacySearchStories from "./LegacySearch.stories";

<Meta of={LegacySearchStories} />

# LegacySearch

<DeprecatedWarning alternativeName="Search" alternativeLink="/?path=/docs/inputs-search" />

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

LegacySearch lets users quickly find relevant content. A search field allows a user to type a word or phrase to filter through a large amount of data without navigation.

<Canvas of={LegacySearchStories.Overview} />

## Import

```ts
import { Search } from "monday-ui-react-core";
```

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "LegacySearch query input methods can be extended to include historical suggestions and auto-completion of queries.",
    "LegacySearch results are displayed below the search bar.",
    "Always use the search icon to help users identify search fields. Display the search icon as a presentational icon inside the search input.",
    "Let users submit their search by hitting enter. For live-filtering search, update search results immediately without hitting enter and be mindful of performance.",
    "If used as filter, position the search field above and in context to the list of filterable items"
  ]}
/>

<TipCombobox />

## Variants

### Sizes

There are three sizes available: Small (32px), Medium (40px), and Large (48px).

<Canvas of={LegacySearchStories.Sizes} />

## Use cases and examples

### Filter in combobox

<Canvas of={LegacySearchStories.FilterInCombobox} />

## Related components

<RelatedComponents componentsNames={[DROPDOWN, TEXT_FIELD, COMBOBOX]} />