Top
ComboBox - Styling & Theming
ComboBox
To style and customize the appearance of <ComboBox />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a className - note that this will not override the default class of zippy-react-toolkit-combo-box, but rather will be appended to the classes that component already has.
Below you can find a list with all the CSS classes applied to combo boxes and when/how they are applied.
ClassNameDescription
zippy-react-toolkit-combo-box
This is the block className for all combo boxes. Always applied.
zippy-react-toolkit-combo-box--rtl
Applied when rtl=true.
zippy-react-toolkit-combo-box--inlineFlex
Applied when inlineFlex=true.
zippy-react-toolkit-combo-box--shadow
Applied when shadow=true.
zippy-react-toolkit-combo-box--disabled
Applied when disabled=true.
zippy-react-toolkit-combo-box--focus
Applied when <ComboBox /> has focus.
zippy-react-toolkit-combo-box__list
Applied when dropdown list.
zippy-react-toolkit-combo-box__list--loading
Applied on dropdown list when loading=true.
zippy-react-toolkit-combo-box__list--empty
Applied on dropdown list when dataSource has length 0 or when it is null. .
zippy-react-toolkit-combo-box__list--position-top
Applied when dropdown list when it is positioned top relative to <ComboBox /> body.
zippy-react-toolkit-combo-box__list--position-bottom
Applied when dropdown list when it is positioned bottom relative to <ComboBox /> body.
zippy-react-toolkit-combo-box__list__item
Applied when dropdown item.
zippy-react-toolkit-combo-box__list__item--selected
Applied on dropdown list item when it is in value.
zippy-react-toolkit-combo-box__list__item--active
Applied on dropdown list item when it is activeItem.
zippy-react-toolkit-combo-box__list__item--active
Applied on dropdown list item when it is disabled.
zippy-react-toolkit-combo-box__list__item__highlight
Applied on text that matches when highlightMatchedText=true.
zippy-react-toolkit-combo-box__list__loading-text
Applied when text rendered inside dropdown list when loading=true.
zippy-react-toolkit-combo-box__list__new-custom-tag-text
Applied on text rendered inside dropdown list when allowCustomTagCreation=true and search text doesn't match any item.
zippy-react-toolkit-combo-box__list__empty-text
Applied on text rendered inside dropdown list when dataSource is empty (is null or has length 0).
zippy-react-toolkit-combo-box__input
Applied search input.
zippy-react-toolkit-combo-box__input__wrapper
Applied search input wrapper.
zippy-react-toolkit-combo-box__input__placeholder
Applied on placeholder
zippy-react-toolkit-combo-box__value
Applied on the wrapper that holds tags, displayValue and search input.
zippy-react-toolkit-combo-box__tools
Applied on wrapper that holds toggleIcon and clearIcon.
zippy-react-toolkit-combo-box__value__tag
Applied on tag.
zippy-react-toolkit-combo-box__value__display-value
Applied on display value.
zippy-react-toolkit-combo-box__value__tag--ellipsis
Applied on tag when tagEllipsis=true.
zippy-react-toolkit-combo-box__value__tag__label
Applied on tag text.
zippy-react-toolkit-combo-box__value__tag__clear-icon__position__end
Applied on clearIcon when is positioned to "end".
zippy-react-toolkit-combo-box__value__tag__clear-icon__position__start
Applied on clearIcon when is positioned to "start".
zippy-react-toolkit-combo-box__toggle-icon
Applied on clearIcon.