@workday/canvas-kit-docs/dist/mdx/labs-react/combobox/Combobox.mdx

Documentation components of Canvas Kit components

import {
  ExampleCodeBlock,
  StorybookStatusIndicator,
  SymbolDoc,
  Specifications,
} from '@workday/canvas-kit-docs';
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
import Basic from './examples/Basic';
import DisabledItem from './examples/DisabledItem';
import GroupOfResult from './examples/GroupOfResult';
import Grow from './examples/Grow';
import NoClearButton from './examples/NoClearButton';
import RTL from './examples/RTL';


# Combobox <StorybookStatusIndicator type="deprecated" />

<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
  <InformationHighlight.Icon />
  <InformationHighlight.Body>
    `Combobox` 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">
    Combobox Docs
  </InformationHighlight.Link>
</InformationHighlight>

The term "Combobox" is based on the
[Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) as defined in the ARIA
Authoring Practices Guide (APG):

> A [combobox](https://w3c.github.io/aria/#combobox) is an input widget with an associated popup
> that enables users to select a value for the combobox from a collection of possible values.

Examples of a "combobox" would be date pickers, autocomplete, and select components.

## Installation

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

## Usage

### Autocomplete

<ExampleCodeBlock code={Basic} />

### Grow

<ExampleCodeBlock code={Grow} />

### No Clear Button

<ExampleCodeBlock code={NoClearButton} />

### Group Of Result

<ExampleCodeBlock code={GroupOfResult} />

### Disabled Item

<ExampleCodeBlock code={DisabledItem} />

### RTL

<ExampleCodeBlock code={RTL} />