UNPKG

@ebay/ui-core-react

Version:

Skin components build off React

53 lines (37 loc) 1.75 kB
# 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[] })` |