Skip to Content
Patternfly Logo

Select

Use a select to choose one or more values from a list. Related design guidelines: Data input

ExamplesDocumentationUsageUsageUsageUsageDocumentationCSS Variables

Examples

Single

Disabled

Single expanded

Single with top expanded

The top select variation should be used when you want the menu to display above the toggle.

Usage

ClassApplied toOutcome
.pf-c-select<div>Initiates a custom select.
.pf-c-select__toggle<button>Initiates a custom toggle.
.pf-c-select__toggle-wrapper<div>Initiates a custom select toggle wrapper.
.pf-c-select__toggle-arrow<span>Initiates the caret to toggle the dropdown.
.pf-c-select__menu<ul>Initiates the custom select dropdown menu.
.pf-c-select__menu-item<li>Initiates the items in the custom select dropdown menu.
.pf-c-select__menu-item-icon<i>Initiates the selected item icon.
.pf-m-top.pf-c-selectModifies the select menu to display above the toggle.
.pf-m-active.pf-c-select__toggleForces display of the active state of the toggle.

Single expanded and selected

The single select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and ARIA tag structure is specific to a select list. The selection will replace the default text in the toggle. The selection is highlighted with the list is opened. If the selection is cleared elsewhere (i.e. from the filter bar), the default text is restored.

Accessibility

AttributeApplied toOutcome
aria-selected="true".pf-c-select__menu-itemShould be set programmatically to indicate the active item.
disabled.pf-c-select__toggleDisables the dropdown toggle and removes it from keyboard focus.

Usage

ClassApplied toOutcome
.pf-c-select<div>Initiates the select component.
.pf-c-select__toggle<button>Initiates the select toggle.
.pf-c-select__toggle-wrapper<div>Initiates the select toggle wrapper.
.pf-c-select__toggle-arrow<span>Initiates the caret to toggle the dropdown.
.pf-c-select__menu<ul>Initiates the select dropdown menu.
.pf-c-select__menu-item<li>Initiates the items in the select dropdown menu.
.pf-c-select__menu-item-icon<span>Initiates the selected item icon wrapper.
.pf-m-expanded.pf-c-selectIndicates the select is expanded.
.pf-m-selected.pf-c-select__menu-itemIndicates the menu item is selected.
.pf-m-disableddiv.pf-c-select__toggleModifies to display the select toggle as disabled. This applies to div.pf-c-select__toggle and should not be used in lieu of the disabled attribute on button.pf-c-select__toggle. When this is used, disabled should also be added to any form elements in div.pf-c-select__toggle

Documentation

Accessibility

AttributeApplied toOutcome
aria-selected="true".pf-c-select__menu-itemShould be set programmatically to indicate the active item.
disabled.pf-c-select__toggleDisables the dropdown toggle and removes it from keyboard focus.

Usage

ClassApplied toOutcome
.pf-c-select<div>Initiates the select component.
.pf-c-select__toggle<button>Initiates the select toggle.
.pf-c-select__toggle-wrapper<div>Initiates the select toggle wrapper.
.pf-c-select__toggle-arrow<span>Initiates the caret to toggle the dropdown.
.pf-c-select__menu<ul>Initiates the select dropdown menu.
.pf-c-select__menu-item<li>Initiates the items in the select dropdown menu.
.pf-c-select__menu-item-icon<i>Initiates the selected item icon.
.pf-m-expanded.pf-c-selectIndicates the select is expanded.
.pf-m-selected.pf-c-select__menu-itemIndicates the menu item is selected.
.pf-m-disableddiv.pf-c-select__toggleModifies to display the select toggle as disabled. This applies to div.pf-c-select__toggle and should not be used in lieu of the disabled attribute on button.pf-c-select__toggle. When this is used, disabled should also be added to any form elements in div.pf-c-select__toggle

Single with typeahead

Single with typeahead expanded

Single with typeahead expanded and selected

Disabled with typeahead

The single select typeahead should be used when the user is selecting one option from a list of items with the option to narrow the list by typing from the keyboard. Selected items are removed from the list. The user can clear the selection and restore the placeholder text.

Accessibility

AttributeApplied toOutcome
aria-selected="true".pf-c-select__menu-itemShould be set programmatically to indicate the active item.

Usage

ClassApplied toOutcome
.pf-c-select<div>Initiates the select component.
.pf-c-select__toggle<div>Initiates the select toggle.
.pf-c-select__toggle-wrapper<div>Initiates the select toggle wrapper.
.pf-c-select__toggle-typeaheadinput.pf-c-form-controlInitiates the input field for typeahead.
.pf-c-select__toggle-clearbutton.pf-c-button.pf-m-plainInitiates a clear button in the toggle.
.pf-c-select__toggle-buttonbutton.pf-c-button.pf-m-plainInitiates a toggle button.
.pf-c-select__toggle-arrow<span>Initiates the caret icon.
.pf-c-select__menu<ul>Initiates the select dropdown menu.
.pf-c-select__menu-item<li>Initiates the items in the select dropdown menu.
.pf-m-expanded.pf-c-selectIndicates the select is expanded.
.pf-m-typeahead.pf-c-select__toggleIndicates the select has a typeahead.
.pf-m-focus.pf-c-select__menu-itemModifies the menu item to apply :focus styling. For use when navigating the menu items by keyboard when the typeahead input field has browser focus.

Select multi with typeahead

Multi with typeahead (chip group expanded)

  • Arkansas
  • Massachusetts
  • New Mexico
  • Ohio
  • Washington

Multi with typeahead (chip group collapsed)

  • Arkansas
  • Massachusetts
  • New Mexico

The Dropdown Multi Select should be used when the user is selecting multiple items from a list. The user can narrow the list by typing from the keyboard. The List updates while typing. Selected items create a new chip and are removed from the list. The user may clear selections individually or all at once to restore the placeholder.

Accessibility

AttributeApplied toOutcome
aria-selected="true".pf-c-select__menu-itemShould be set programmatically to indicate the active item.

Usage

ClassApplied toOutcome
.pf-c-select<div>Initiates the select component.
.pf-c-select__toggle<div>Initiates the select toggle.
.pf-c-select__toggle-wrapper<div>Initiates the select toggle wrapper so that chips and input field can wrap together.
.pf-c-chip<div>Initiates a chip. (See chip component for more details)
.pf-c-select__toggle-typeaheadinput.pf-c-form-controlInitiates the input field for typeahead.
.pf-c-select__toggle-clearbutton.pf-m-plainInitiates a clear button in the toggle.
.pf-c-select__toggle-button<button>Initiates a toggle button.
.pf-c-select__toggle-arrow<span>Initiates the caret icon.
.pf-c-select__menu<ul>Initiates the select dropdown menu.
.pf-c-select__menu-item<li>Initiates the items in the select dropdown menu.
.pf-m-expanded.pf-c-selectIndicates the select is expanded.
.pf-m-typeahead.pf-c-select__toggleIndicates the select has a typeahead.

Checkbox

Checkbox expanded

Checkbox expanded and selected with groups

Checkbox expanded and selected with groups and filter


Checkbox expanded without badge

The checkbox select can select multiple items using checkboxes. The number of items selected is reflected in an optional badge in the dropdown toggle. The user may clear items by unchecking or using the clear button. Optionally, items may be grouped.

Usage

ClassApplied toOutcome
.pf-c-select<div>Initiates the select component.
.pf-c-select__toggle<button>Initiates the select toggle.
.pf-c-select__toggle-wrapper<div>Initiates the select toggle wrapper so that chips and input field can wrap together.
.pf-c-chip<div>Initiates a chip. (See chip component for more details)
.pf-c-select__toggle-typeaheadinput.pf-c-form-controlInitiates the input field for typeahead.
.pf-c-select__toggle-badge<div>Initiates a container for a badge to indicate the number of items checked. note: This should contain an unread badge
.pf-c-select__toggle-clearbutton.pf-m-plainInitiates a clear button in the toggle.
.pf-c-select__toggle-arrow<span>Initiates the caret to toggle the dropdown.
.pf-c-select__menu<div>Initiates the select dropdown menu.
.pf-c-select__menu-itemdiv.pf-c-checkInitiates the items in the select dropdown menu.
.pf-c-select__menu-fieldset<fieldset>Initiates a fieldset for the items in a checkbox select.
.pf-c-select__menu-group<div>Initiates a group within a select menu.
.pf-c-select__menu-group-title<div>Initiates a title for a group with a select menu.
.pf-c-select__menu-search<div>Initiates a container for the search input group.
.pf-m-expanded.pf-c-selectIndicates the select is expanded.
.pf-m-typeahead.pf-c-select__toggleIndicates the select has a typeahead.

Plain

Plain expanded

The plain select variation should be used when you do not want a border applied to the select toggle.

Usage

ClassApplied toOutcome
.pf-c-select<div>Initiates the select component.
.pf-c-select__toggle<button>Initiates the select toggle.
.pf-c-select__toggle-wrapper<div>Initiates the select toggle wrapper.
.pf-c-select__toggle-arrow<span>Initiates the caret to toggle the dropdown.
.pf-c-select__menu<ul>Initiates the select dropdown menu.
.pf-c-select__menu-item<li>Initiates the items in the select dropdown menu.
.pf-c-select__menu-item-icon<i>Initiates the selected item icon.
.pf-m-expanded.pf-c-selectIndicates the select is expanded.
.pf-m-plain.pf-c-select__toggleModifies to display the toggle with no border.
.pf-m-selected.pf-c-select__menu-itemIndicates the menu item is selected.

Icon

Accessibility

AttributeApplied toOutcome
aria-hidden="true".pf-c-select__toggle-iconHides the icon from assistive technologies.

Usage

ClassApplied toOutcome
.pf-c-select<div>Initiates the select component.
.pf-c-select__toggle<button>Initiates the select toggle.
.pf-c-select__toggle-wrapper<div>Initiates the select toggle wrapper.
.pf-c-select__toggle-icon<span>Initiates the icon in the dropdown toggle.
.pf-c-select__toggle-arrow<span>Initiates the caret to toggle the dropdown.

Panel

[Panel contents here]

Usage

ClassApplied toOutcome
.pf-c-select<div>Initiates the select component.
.pf-c-select__toggle<button>Initiates the select toggle.
.pf-c-select__toggle-wrapper<div>Initiates the select toggle wrapper.
.pf-c-select__toggle-arrow<span>Initiates the caret to toggle the dropdown.
.pf-c-select__menu<div>Initiates the select dropdown menu.

With description

Checkbox with description

Usage

ClassApplied toOutcome
.pf-c-select__menu-item-description<span>Initiates the select menu item description element.
.pf-c-select__menu-item-main<span>Initiates the select menu item main element. Used when the description element is present.
.pf-m-description.pf-c-select__menu-itemModifies the select menu item when selected to accommodate the description element.

Favorites




Accessibility

AttributeApplied toOutcome
aria-label="Not starred".pf-c-select__menu-wrapper > .pf-c-select__menu-item.pf-m-actionProvides an accessible label indicating that the favorite action is not selected.
aria-label="Starred".pf-c-select__menu-wrapper.pf-m-favorite > .pf-c-select__menu-item.pf-m-actionProvides an accessible label indicating that the favorite action is selected.

Usage

ClassApplied toOutcome
.pf-c-select__menu-wrapper<li>Defines a menu wrapper for use with multiple actionable items in a single item row.
.pf-m-favorite.pf-c-select__menu-wrapperModifies wrapper to indicate that the item row has been favorited.
.pf-m-favorite-action.pf-c-select__menu-itemModifies an item for favorite styles.
.pf-m-link.pf-c-select__menu-item.pf-m-wrapper > .pf-c-select__menu-itemModifies item for link styles.
.pf-m-action.pf-c-select__menu-item.pf-m-wrapper > .pf-c-select__menu-itemModifies item to for action styles.

Documentation

Overview

There are 4 variants of the select component: single select, single select with typeahead, multiple select with typeahead, and a multiple checkbox select. See the examples for more details about each variation.

The single select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and ARIA tag structure is specific to a select list. The selection will replace the default text in the toggle. The selection is highlighted with the list is opened. If the selection is cleared elsewhere (i.e. from the filter bar), the default text is restored.

CSS Variables

.pf-c-select--pf-global--Color--100global_Color_100
#151515
.pf-c-select--pf-global--Color--200global_Color_200
#6a6e73
.pf-c-select--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
.pf-c-select--pf-global--primary-color--100global_primary_color_100
#06c
.pf-c-select--pf-global--link--Colorglobal_link_Color
#06c
.pf-c-select--pf-global--link--Color--hoverglobal_link_Color_hover
#004080
.pf-c-select--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
.pf-c-select--pf-c-select__toggle--PaddingTopc_select__toggle_PaddingTop
0.375rem
.pf-c-select--pf-c-select__toggle--PaddingRightc_select__toggle_PaddingRight
0.5rem
.pf-c-select--pf-c-select__toggle--PaddingBottomc_select__toggle_PaddingBottom
0.375rem
.pf-c-select--pf-c-select__toggle--PaddingLeftc_select__toggle_PaddingLeft
0.5rem
.pf-c-select--pf-c-select__toggle--MinWidthc_select__toggle_MinWidth
44px
.pf-c-select--pf-c-select__toggle--FontSizec_select__toggle_FontSize
1rem
.pf-c-select--pf-c-select__toggle--FontWeightc_select__toggle_FontWeight
400
.pf-c-select--pf-c-select__toggle--LineHeightc_select__toggle_LineHeight
1.5
.pf-c-select--pf-c-select__toggle--BackgroundColorc_select__toggle_BackgroundColor
#fff
.pf-c-select--pf-c-select__toggle--before--BorderWidthc_select__toggle_before_BorderWidth
1px
.pf-c-select--pf-c-select__toggle--before--BorderTopColorc_select__toggle_before_BorderTopColor
#f0f0f0
.pf-c-select--pf-c-select__toggle--before--BorderRightColorc_select__toggle_before_BorderRightColor
#f0f0f0
.pf-c-select--pf-c-select__toggle--before--BorderBottomColorc_select__toggle_before_BorderBottomColor
#8a8d90
.pf-c-select--pf-c-select__toggle--before--BorderLeftColorc_select__toggle_before_BorderLeftColor
#f0f0f0
.pf-c-select--pf-c-select__toggle--Colorc_select__toggle_Color
#151515
.pf-c-select--pf-c-select__toggle--hover--before--BorderBottomColorc_select__toggle_hover_before_BorderBottomColor
#06c
.pf-c-select--pf-c-select__toggle--focus--before--BorderBottomColorc_select__toggle_focus_before_BorderBottomColor
#06c
.pf-c-select--pf-c-select__toggle--active--before--BorderBottomColorc_select__toggle_active_before_BorderBottomColor
#06c
.pf-c-select--pf-c-select__toggle--m-expanded--before--BorderBottomColorc_select__toggle_m_expanded_before_BorderBottomColor
#06c
.pf-c-select--pf-c-select__toggle--focus--before--BorderBottomWidthc_select__toggle_focus_before_BorderBottomWidth
2px
.pf-c-select--pf-c-select__toggle--active--before--BorderBottomWidthc_select__toggle_active_before_BorderBottomWidth
2px
.pf-c-select--pf-c-select__toggle--m-expanded--before--BorderBottomWidthc_select__toggle_m_expanded_before_BorderBottomWidth
2px
.pf-c-select--pf-c-select__toggle--disabled--BackgroundColorc_select__toggle_disabled_BackgroundColor
#f0f0f0
.pf-c-select--pf-c-select__toggle--m-plain--before--BorderColorc_select__toggle_m_plain_before_BorderColor
transparent
.pf-c-select--pf-c-select__toggle-wrapper--not-last-child--MarginRightc_select__toggle_wrapper_not_last_child_MarginRight
0.25rem
.pf-c-select--pf-c-select__toggle-wrapper--MaxWidthc_select__toggle_wrapper_MaxWidth
calc(100% - 1.5rem)
.pf-c-select--pf-c-select__toggle-wrapper--c-chip-group--MarginTopc_select__toggle_wrapper_c_chip_group_MarginTop
0.3125rem
.pf-c-select--pf-c-select__toggle-wrapper--c-chip-group--MarginBottomc_select__toggle_wrapper_c_chip_group_MarginBottom
0.3125rem
.pf-c-select--pf-c-select__toggle-typeahead--FlexBasisc_select__toggle_typeahead_FlexBasis
10em
.pf-c-select--pf-c-select__toggle-typeahead--BackgroundColorc_select__toggle_typeahead_BackgroundColor
transparent
.pf-c-select--pf-c-select__toggle-typeahead--BorderTopc_select__toggle_typeahead_BorderTop
none
.pf-c-select--pf-c-select__toggle-typeahead--BorderRightc_select__toggle_typeahead_BorderRight
none
.pf-c-select--pf-c-select__toggle-typeahead--BorderLeftc_select__toggle_typeahead_BorderLeft
none
.pf-c-select--pf-c-select__toggle-typeahead--MinWidthc_select__toggle_typeahead_MinWidth
7.5rem
.pf-c-select--pf-c-select__toggle-typeahead--focus--PaddingBottomc_select__toggle_typeahead_focus_PaddingBottom
calc(0.375rem - 1px)
.pf-c-select--pf-c-select__toggle-icon--toggle-text--MarginLeftc_select__toggle_icon_toggle_text_MarginLeft
0.25rem
.pf-c-select--pf-c-select__toggle-badge--PaddingLeftc_select__toggle_badge_PaddingLeft
0.5rem
.pf-c-select--pf-c-select__toggle-arrow--MarginLeftc_select__toggle_arrow_MarginLeft
1rem
.pf-c-select--pf-c-select__toggle-arrow--MarginRightc_select__toggle_arrow_MarginRight
0.5rem
.pf-c-select--pf-c-select__toggle-arrow--with-clear--MarginLeftc_select__toggle_arrow_with_clear_MarginLeft
0.5rem
.pf-c-select--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotatec_select__toggle_arrow_m_top_m_expanded__toggle_arrow_Rotate
180deg
.pf-c-select--pf-c-select__toggle-clear--PaddingRightc_select__toggle_clear_PaddingRight
0.5rem
.pf-c-select--pf-c-select__toggle-clear--PaddingLeftc_select__toggle_clear_PaddingLeft
1rem
.pf-c-select--pf-c-select__toggle-clear--toggle-button--PaddingLeftc_select__toggle_clear_toggle_button_PaddingLeft
0.5rem
.pf-c-select--pf-c-select__toggle-button--Colorc_select__toggle_button_Color
#151515
.pf-c-select--pf-c-select__menu--BackgroundColorc_select__menu_BackgroundColor
#fff
.pf-c-select--pf-c-select__menu--BoxShadowc_select__menu_BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-select--pf-c-select__menu--PaddingTopc_select__menu_PaddingTop
0.5rem
.pf-c-select--pf-c-select__menu--PaddingBottomc_select__menu_PaddingBottom
0.5rem
.pf-c-select--pf-c-select__menu--Topc_select__menu_Top
calc(100% + 0.25rem)
.pf-c-select--pf-c-select__menu--ZIndexc_select__menu_ZIndex
200
.pf-c-select--pf-c-select__menu--m-top--TranslateYc_select__menu_m_top_TranslateY
calc(-100% - 0.25rem)
.pf-c-select--pf-c-select__menu-item--PaddingTopc_select__menu_item_PaddingTop
0.5rem
.pf-c-select--pf-c-select__menu-item--PaddingRightc_select__menu_item_PaddingRight
1rem
.pf-c-select--pf-c-select__menu-item--m-selected--PaddingRightc_select__menu_item_m_selected_PaddingRight
3rem
.pf-c-select--pf-c-select__menu-item--PaddingBottomc_select__menu_item_PaddingBottom
0.5rem
.pf-c-select--pf-c-select__menu-item--PaddingLeftc_select__menu_item_PaddingLeft
1rem
.pf-c-select--pf-c-select__menu-item--FontSizec_select__menu_item_FontSize
1rem
.pf-c-select--pf-c-select__menu-item--FontWeightc_select__menu_item_FontWeight
400
.pf-c-select--pf-c-select__menu-item--LineHeightc_select__menu_item_LineHeight
1.5
.pf-c-select--pf-c-select__menu-item--Colorc_select__menu_item_Color
#151515
.pf-c-select--pf-c-select__menu-item--Widthc_select__menu_item_Width
100%
.pf-c-select--pf-c-select__menu-item--disabled--Colorc_select__menu_item_disabled_Color
#6a6e73
.pf-c-select--pf-c-select__menu-item--hover--BackgroundColorc_select__menu_item_hover_BackgroundColor
#f0f0f0
.pf-c-select--pf-c-select__menu-item--focus--BackgroundColorc_select__menu_item_focus_BackgroundColor
#f0f0f0
.pf-c-select--pf-c-select__menu-item--disabled--BackgroundColorc_select__menu_item_disabled_BackgroundColor
transparent
.pf-c-select--pf-c-select__menu-item--m-link--Widthc_select__menu_item_m_link_Width
auto
.pf-c-select--pf-c-select__menu-item--m-link--hover--BackgroundColorc_select__menu_item_m_link_hover_BackgroundColor
transparent
.pf-c-select--pf-c-select__menu-item--m-link--focus--BackgroundColorc_select__menu_item_m_link_focus_BackgroundColor
transparent
.pf-c-select--pf-c-select__menu-item--m-action--hover--BackgroundColorc_select__menu_item_m_action_hover_BackgroundColor
transparent
.pf-c-select--pf-c-select__menu-item--m-action--Colorc_select__menu_item_m_action_Color
#d2d2d2
.pf-c-select--pf-c-select__menu-item--m-action--Widthc_select__menu_item_m_action_Width
auto
.pf-c-select--pf-c-select__menu-item--m-action--FontSizec_select__menu_item_m_action_FontSize
0.625rem
.pf-c-select--pf-c-select__menu-item--hover__menu-item--m-action--Colorc_select__menu_item_hover__menu_item_m_action_Color
#6a6e73
.pf-c-select--pf-c-select__menu-item--m-action--hover--Colorc_select__menu_item_m_action_hover_Color
#151515
.pf-c-select--pf-c-select__menu-item--m-action--focus--Colorc_select__menu_item_m_action_focus_Color
#151515
.pf-c-select--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Colorc_select__menu_wrapper_m_favorite__menu_item_m_favorite_action_Color
#f0ab00
.pf-c-select--pf-c-select__menu-item-icon--Colorc_select__menu_item_icon_Color
#06c
.pf-c-select--pf-c-select__menu-item-icon--FontSizec_select__menu_item_icon_FontSize
0.625rem
.pf-c-select--pf-c-select__menu-item-icon--Rightc_select__menu_item_icon_Right
1rem
.pf-c-select--pf-c-select__menu-item-icon--Topc_select__menu_item_icon_Top
50%
.pf-c-select--pf-c-select__menu-item-icon--TranslateYc_select__menu_item_icon_TranslateY
-50%
.pf-c-select--pf-c-select__menu-item-action-icon--MinHeightc_select__menu_item_action_icon_MinHeight
calc(1rem * 1.5)
.pf-c-select--pf-c-select__menu-item--match--FontWeightc_select__menu_item_match_FontWeight
700
.pf-c-select--pf-c-select__menu-search--PaddingTopc_select__menu_search_PaddingTop
0.5rem
.pf-c-select--pf-c-select__menu-search--PaddingRightc_select__menu_search_PaddingRight
1rem
.pf-c-select--pf-c-select__menu-search--PaddingBottomc_select__menu_search_PaddingBottom
1rem
.pf-c-select--pf-c-select__menu-search--PaddingLeftc_select__menu_search_PaddingLeft
1rem
.pf-c-select--pf-c-select__menu-group--menu-group--PaddingTopc_select__menu_group_menu_group_PaddingTop
0.5rem
.pf-c-select--pf-c-select__menu-group-title--PaddingTopc_select__menu_group_title_PaddingTop
0.5rem
.pf-c-select--pf-c-select__menu-group-title--PaddingRightc_select__menu_group_title_PaddingRight
1rem
.pf-c-select--pf-c-select__menu-group-title--PaddingBottomc_select__menu_group_title_PaddingBottom
0.5rem
.pf-c-select--pf-c-select__menu-group-title--PaddingLeftc_select__menu_group_title_PaddingLeft
1rem
.pf-c-select--pf-c-select__menu-group-title--FontSizec_select__menu_group_title_FontSize
0.875rem
.pf-c-select--pf-c-select__menu-group-title--FontWeightc_select__menu_group_title_FontWeight
700
.pf-c-select--pf-c-select__menu-group-title--Colorc_select__menu_group_title_Color
#6a6e73
.pf-c-select--pf-c-select__menu-item-description--FontSizec_select__menu_item_description_FontSize
0.75rem
.pf-c-select--pf-c-select__menu-item-description--Colorc_select__menu_item_description_Color
#6a6e73
.pf-c-select--pf-c-select__menu-item-description--PaddingRightc_select__menu_item_description_PaddingRight
1rem
.pf-c-select--pf-c-select__menu-item-main--PaddingRightc_select__menu_item_main_PaddingRight
1rem
.pf-c-select--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRightc_select__menu_item_m_selected__menu_item_main_PaddingRight
3rem
.pf-c-select--pf-c-select-menu--c-divider--MarginTopc_select_menu_c_divider_MarginTop
0.5rem
.pf-c-select--pf-c-select-menu--c-divider--MarginBottomc_select_menu_c_divider_MarginBottom
0.5rem
.pf-c-select .pf-c-divider:last-child--pf-c-select-menu--c-divider--MarginBottomc_select_menu_c_divider_MarginBottom
0
.pf-c-select__menu-search + .pf-c-divider--pf-c-select-menu--c-divider--MarginTopc_select_menu_c_divider_MarginTop
0
.pf-c-select__toggle.pf-m-disabled--pf-c-select__toggle--BackgroundColorc_select__toggle_BackgroundColor
#f0f0f0
.pf-c-select__toggle:hover::before--pf-c-select__toggle--before--BorderBottomColorc_select__toggle_before_BorderBottomColor
#06c
.pf-c-select__toggle:focus::before--pf-c-select__toggle--before--BorderBottomColorc_select__toggle_before_BorderBottomColor
#06c
.pf-c-select__toggle:active::before--pf-c-select__toggle--before--BorderBottomColorc_select__toggle_before_BorderBottomColor
#06c
.pf-m-expanded > .pf-c-select__toggle::before--pf-c-select__toggle--before--BorderBottomColorc_select__toggle_before_BorderBottomColor
#06c
.pf-c-select__toggle.pf-m-typeahead--pf-c-select__toggle--PaddingTopc_select__toggle_PaddingTop
0
.pf-c-select__toggle.pf-m-typeahead--pf-c-select__toggle--PaddingRightc_select__toggle_PaddingRight
0
.pf-c-select__toggle.pf-m-typeahead--pf-c-select__toggle--PaddingBottomc_select__toggle_PaddingBottom
0
.pf-c-select__menu-wrapper.pf-m-favorite .pf-c-select__menu-item.pf-m-favorite-action--pf-c-select__menu-item--Colorc_select__menu_item_Color
#f0ab00
.pf-c-select__menu-item:hover--pf-c-select__menu-item--m-action--Colorc_select__menu_item_m_action_Color
#6a6e73
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item--PaddingRightc_select__menu_item_PaddingRight
0
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item-main--PaddingRightc_select__menu_item_main_PaddingRight
0
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item-description--PaddingRightc_select__menu_item_description_PaddingRight
0
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item--Widthc_select__menu_item_Width
auto
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item--hover--BackgroundColorc_select__menu_item_hover_BackgroundColor
transparent
.pf-c-select__menu-item.pf-m-link--pf-c-select__menu-item--focus--BackgroundColorc_select__menu_item_focus_BackgroundColor
transparent
.pf-c-select__menu-item.pf-m-action--pf-c-select__menu-item--hover--BackgroundColorc_select__menu_item_hover_BackgroundColor
transparent
.pf-c-select__menu-item.pf-m-action--pf-c-select__menu-item--Colorc_select__menu_item_Color
#d2d2d2
.pf-c-select__menu-item.pf-m-action--pf-c-select__menu-item--Widthc_select__menu_item_Width
auto
.pf-c-select__menu-item.pf-m-action:hover--pf-c-select__menu-item--m-action--Colorc_select__menu_item_m_action_Color
#151515
.pf-c-select__menu-item.pf-m-action:focus--pf-c-select__menu-item--m-action--Colorc_select__menu_item_m_action_Color
#151515
.pf-c-select__menu-item.pf-m-selected--pf-c-select__menu-item--PaddingRightc_select__menu_item_PaddingRight
3rem
.pf-c-select__menu-item.pf-m-selected--pf-c-select__menu-item-main--PaddingRightc_select__menu_item_main_PaddingRight
3rem
.pf-c-select__menu-item.pf-m-description:not(.pf-c-check)--pf-c-select__menu-item--PaddingRightc_select__menu_item_PaddingRight
0