@workday/canvas-kit-docs/dist/mdx/labs-react/search-form/SearchForm.mdx

Documentation components of Canvas Kit components

import {ExampleCodeBlock, SymbolDoc, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';import Basic from './examples/Basic';
import Collapsed from './examples/Collapsed';
import CustomTheme from './examples/CustomTheme';
import Grow from './examples/Grow';
import RTL from './examples/RTL';
import Theming from './examples/Theming';
import CustomStyles from './examples/CustomStyles';


# Canvas Kit Search Form <StorybookStatusIndicator type="deprecated" />

<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
  <InformationHighlight.Icon />
  <InformationHighlight.Body>
    `SearchForm` in Labs has been deprecated and will be removed in a future major version. Please
    use `Combobox` in Main instead.
  </InformationHighlight.Body>
  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage">
    View Autocomplete Example
  </InformationHighlight.Link>
</InformationHighlight>

`SearchForm` is a search form that contains a `Combobox` for rendering search results. It's
primarily intended to be used within a `Header`.

## Installation

```sh
yarn add @workday/canvas-kit-labs-react
```

## Usage

### Basic Example

You will most likely use `SearchForm` within the context of a `Header` component, but it's helpful
to see its functionality as a standalone component. Below is a basic example that filters results
based on search input.

<ExampleCodeBlock code={Basic} />

### Grow

If you'd like `SearchForm` to grow to the width of its container, set the `grow` prop to `true`.

<ExampleCodeBlock code={Grow} />

### Theming

`SearchForm` can be themed to use one of the preset `SearchThemes`: `Light`, `Dark`, or
`Transparent`. Below is an example of `SearchForm` using the `Dark` theme.

<ExampleCodeBlock code={Theming} />

You can also provide more specific theming values by providing specific `SearchThemeAttributes`.

<ExampleCodeBlock code={CustomTheme} />

Below is a table of attributes that can be supplied to `SearchForm`:

<SymbolDoc name="SearchThemeAttributes" fileName="/labs-react/" />

### RTL (Right-To-Left)

`SearchForm` provides bidirectional support out of the box. You shouldn't need to provide any
additional configuration.

<ExampleCodeBlock code={RTL} />

### Collapsed

<ExampleCodeBlock code={Collapsed} />

### Custom Styles

You can apply custom styles to the component via the `cs` prop. The example below uses CSS Variables
and
[createStencil](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs#stencils)
to create a custom style for the `SearchForm` component.

<ExampleCodeBlock code={CustomStyles} />

Learn more in our
[Styling](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)
docs.

## Component API

### SearchForm

<SymbolDoc name="SearchForm" fileName="/labs-react/" />