import { Badge } from 'terra-form-select/package.json?dev-site-package';

import MultipleExample from './example/multiple/MultiSelect?dev-site-example';
import ControlledExample from './example/multiple/Controlled?dev-site-example';
import DisabledExample from './example/multiple/Disabled?dev-site-example';
import IsTouchAccessibleExample from './example/multiple/IsTouchAccessible?dev-site-example';
import InvalidExample from './example/multiple/Invalid?dev-site-example';
import IncompleteExample from './example/multiple/Incomplete?dev-site-example';
import MaxHeightExample from './example/multiple/MaxHeight?dev-site-example';
import OptGroupExample from './example/multiple/OptGroup?dev-site-example';

import MultiSelectPropsTable from 'terra-form-select/lib/MultiSelect?dev-site-props-table';
import OptionPropsTable from 'terra-form-select/lib/shared/_Option?dev-site-props-table';
import OptGroupPropsTable from 'terra-form-select/lib/shared/_OptGroup?dev-site-props-table';

<Badge />

# Terra Form Multi Select

The Multi Select component allows searching and selecting multiple options from a dropdown of selectable options.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-form-select`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->

## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |
| react-intl | ^2.8.0 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Implementation Notes:

The Form-Select component must be composed inside the [Base][1] component with a locale in order for it to load the correct translation strings.

[1]: /components/cerner-terra-core-docs/base/about

## Usage

```jsx
import { MultiSelect } from 'terra-form-select';
```

## Component Features

- [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
- [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
- [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
- [Internationalization Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n)
- [Localization Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n)
- [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)

## Examples
<MultipleExample description="A MultiSelect allows searching and selecting multiple options." />
<IsTouchAccessibleExample description="Ensure accessibility on touch devices. Will render the dropdown menu in normal DOM flow with position absolute. By default, the menu renders in a portal, which is inaccessible on touch devices." />
<DisabledExample />
<InvalidExample description="Applies theme-specific styling for invalid. Will also display error text when used with a Field." />
<IncompleteExample description="Applies theme-specific styling for incomplete. ***Note: Only use incomplete if given specific guidance, reserved for specific applications when no value has been provided. Not for general use.***" />
<OptGroupExample title="Ability to add Option Groups" description="An OptGroup provides a way to group options together within the listbox." />
<MaxHeightExample title="Ability to set a Maximum Height" description="An example of implementing a custom max height of the dropdown." />
<ControlledExample title="Create a Controlled MultiSelect" description="An example of implementing a controlled MultiSelect." />

## Multi Select Props
<MultiSelectPropsTable />

## Option Props
<OptionPropsTable />

## OptGroup Props
<OptGroupPropsTable />