leafyGreen UI Kit Combobox
npm install @leafygreen-ui/combobox``shell`
pnpm add @leafygreen-ui/combobox
`shell`
yarn add @leafygreen-ui/combobox
`shell`
npm install @leafygreen-ui/combobox
`js
import { Combobox, ComboboxOption } from '@leafygreen-ui/combobox';
description="Please pick one"
placeholder="Select fruit"
>
;
`
| Prop | Type | Description | Default |
| ------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------ |
| children | , | Define the Combobox Options by passing children | |multiselect
| | boolean | Defines whether a user can select multiple options, or only a single option. When using TypeScript, multiselect affects the valid values of initialValue, value, and onChange | false |initialValue
| | Array, string | The initial selection. Must be a string (or array of strings) that matches the value prop of a ComboboxOption. Changing the initialValue after initial render will not change the selection. | |value
| | Array, string | The controlled value of the Combobox. Must be a string (or array of strings) that matches the value prop of a ComboboxOption. Changing value after initial render _will_ affect the selection. value will always take precedence over initialValue if both are provided. | |onChange
| | (Array, (string) => void | A callback called when the selection changes. Callback recieves a single argument that is the new selection, either string, or string array | |overflow
| | 'expand-y', 'expand-x', 'scroll-x' | Defines the overflow behavior of a multiselect combobox. expand-y: Combobox has fixed width, and additional selections will cause the element to grow in the block direction. expand-x: Combobox has fixed height, and additional selections will cause the elemenet to grow in the inline direction. scroll-x: Combobox has fixed height and width, and additional selections will cause the element to be scrollable in the x (horizontal) direction. | 'expand-y' |label
| | string | An accessible label for the input, rendered in a
| Prop | Type | Description | Default |
| ------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| value | string | The internal value of the option. Used as the identifier in Combobox initialValue, value and filteredOptions. When undefined, this is set to _.kebabCase(displayName) | |displayName
| | string | The display value of the option. Used as the rendered string within the menu and chips. When undefined, this is set to value | |glyph
| | | The icon to display to the left of the option in the menu. | |className
| | string | The className passed to the root element of the component. | |description
| | string | Optional descriptive text under the displayName. | |onClick
| | (event: React.SyntheticEvent | Callback fired when an option is clicked. Returns the event and the option value. | |
| Prop | Type | Description | Default |
| ----------- | ------------------ | ---------------------------------------------------------- | ------- |
| label | string | Label for the group of options | |children
| | | Options in the group | |className
| | string` | The className passed to the root element of the component. | |