import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';

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

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