yarn add @leafygreen-ui/combobox
name | default | description | type |
---|---|---|---|
chipCharacterLimit | 12 | Defines the character limit of a Chip before they start truncating. Note: the three ellipses dots are included in the character limit and the chip will only truncate if the chip length is greater than the `chipCharacterLimit` | number |
chipTruncationLocation | '-' | Defines where the ellipses will appear in a Chip when the label length exceeds the `chipCharacterLimit`. If `none` is passed, the chip will not truncate. Note: If there is any truncation, the full label text will appear inside a tooltip on hover | "none", "start", "middle", "end" |
clearable |
| Defines whether the Clear button appears to the right of the input. | boolean |
darkMode | '-' | Toggles Dark Mode | boolean |
description | '-' | A description for the input | ReactNode |
disabled |
| Disables all interaction with the component | boolean |
errorMessage | DEFAULT_MESSAGES.error | The message shown below the input when state is `error` | ReactNode |
filteredOptions | '-' | An array used to define which options are displayed. Do not remove options from the JSX children, as this will affect the selected options | string[] |
initialValue | '-' | 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. | string, string[] |
inputValue | '-' | Allows for a controlled text-input value | string |
label | '-' | An accessible label for the input, rendered in a <label> to the DOM | string |
multiselect | false as M | 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` | boolean |
onChange | '-' | A callback called when the selection changes. Callback receives a single argument that is the new selection, either string, or string array | (value: string[], diff?: DiffObject) => void, (value: string) => void |
onClear | '-' | A callback fired when the Clear button is pressed. Fired _after_ `onChange`, and _before_ `onFilter` | (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void |
onFilter | '-' | A callback called when the search input changes. Receives a single argument that is the current input value. Use this callback to set `searchState` and/or `filteredOptions` appropriately | (value: string) => void |
onInputChange | '-' | A callback fired when the input text changes | ChangeEventHandler<HTMLInputElement> |
overflow | expand-y | 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 element 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", "scroll-x", "expand-x" |
popoverZIndex | '-' | Number that controls the z-index of the popover element directly. | number |
portalClassName | '-' | When `renderMode="portal"`, it specifies a class name to apply to the portal element | string |
portalContainer | '-' | When `renderMode="portal"`, it specifies an element to portal within. If not provided, a div is generated at the end of the body | HTMLElement |
portalRef | '-' | When `renderMode="portal"`, it passes a ref to forward to the portal element | MutableRefObject<HTMLElement> |
renderMode | RenderMode.TopLayer | Options to render the popover element | "top-layer", "inline", "portal" |
scrollContainer | '-' | When `renderMode="portal"`, it specifies the scrollable element to position relative to | HTMLElement |
searchEmptyMessage | No results found | A message shown within the menu when there are no options passed in as children, or `filteredOptions` is an empty array | string |
searchErrorMessage | Could not get results! | A message shown within the menu when searchState is `error` | string |
searchLoadingMessage | Loading results... | A message shown within the menu when searchState is `loading` | string |
searchState | unset | The state of search results. Toggles search messages within the menu. | "error", "unset", "loading" |
size | default | Defines the visual size of the component | "xsmall", "small", "default", "large" |
state | none | The error state of the component. Defines whether the error message is displayed. | "none", "error", "valid" |
successMessage | DEFAULT_MESSAGES.success | The message shown below the input when state is `valid` | ReactNode |
value | '-' | 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. | string, string[] |
...rest |
name | default | description | type |
---|---|---|---|
children * | '-' | Options in the group. Must be one or more `ComboboxOption` components | ReactNode |
className | '-' | Styling prop | string |
label * | '-' | Label for the group of options | string |
...rest | Native attributes inherited from |
name | default | description | type |
---|---|---|---|
description | '-' | Optional descriptive text under the displayName. | string |
disabled |
| Defines whether the option is disabled. Node: disabled options are still rendered in the menu, but not selectable. | boolean |
displayName | '-' | The display value of the option. Used as the rendered string within the menu and chips. When undefined, this is set to `value` | string |
glyph | '-' | The icon to display to the left of the option in the menu. | ReactElement<any, string | JSXElementConstructor<any>> |
onClick | '-' | Callback fired when an option is clicked. | (event: SyntheticEvent<HTMLLIElement, Event>, value: string) => void |
value | '-' | The internal value of the option. Used as the identifier in Combobox `initialValue`, value and filteredOptions. When undefined, this is set to `_.kebabCase(displayName)` | string |
...rest |