@ebay/ui-core-react
Version:
Skin components build off React
53 lines (37 loc) • 1.75 kB
Markdown
# EbayChipsCombobox
## Demo
[Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/docs/form-input-ebay-chips-combobox--docs)
## Usage
### Import JS
```jsx harmony
import { EbayChipsCombobox, EbayComboboxOption } from "@ebay/ui-core-react/ebay-chips-combobox";
```
### Import following styles from SKIN
```jsx harmony
import "@ebay/skin/combobox";
import "@ebay/skin/chip";
import "@ebay/skin/chips-combobox";
```
### If tokens haven't been added to the project at a higher level, make sure to import
```jsx harmony
import "@ebay/skin/tokens";
```
### Or import styles using SCSS/CSS
```jsx harmony
import "@ebay/skin/combobox.css";
import "@ebay/skin/chip.css";
import "@ebay/skin/chips-combobox.css";
```
```jsx harmony
<EbayChipsCombobox onChange={handleChange}>
<EbayComboboxOption value="option1">Option 1</EbayComboboxOption>
<EbayComboboxOption value="option2">Option 2</EbayComboboxOption>
<EbayComboboxOption value="option3">Option 3</EbayComboboxOption>
</EbayChipsCombobox>
```
## Attributes
The `EbayChipsCombobox` supports the same attributes as the [EbayCombobox](../ebay-combobox/README.md), with additional attributes specific to the chips functionality:
| Name | Type | Required | Description | Data |
| ---------------------- | -------- | -------- | ---------------------------------------- | ---------------------------------------- |
| `a11yDeleteButtonText` | String | No | Accessibility text for the delete button | |
| `onChange` | Function | No | Triggered when the selection changes | `(event: Event, { selected: string[] })` |