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

Documentation components of Canvas Kit components

import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';import Basic from './examples/Basic';
import CustomTheme from './examples/CustomTheme';
import Grow from './examples/Grow';
import RTL from './examples/RTL';
import Theming from './examples/Theming';


# Canvas Kit Search Form

`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} />

## Component API

### SearchForm

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