PatternFly

Select

A select list enables users to select one or more items from a list. Use a select list when options are dynamic or variable.

Examples

Select builds off of the menu component suite to adapt commonly used properties and functions to create a select menu. See the menu documentation for a full list of properties that may be used to further customize a select menu. View the custom menu examples to see examples of fully functional select menus.

For use cases that do not require a lot of customization, there are various template components available to use in the @react-templates package. These templates have a streamlined API and logic, making them easier to set up and use, but are limited in scope and flexibility. See the templates page for details.

Single select

To let users select a single item from a list, use a single select menu.

You can add multiple <SelectOption> components to build out a list of menu items. For each select option, pass a relevant option label to the value property.

To disable the select menu toggle, use the isDisabled property. In the following example, select the checkbox to observe this behavior.

Select option variants

The following example showcases different option variants and customizations that are commonly used in a select menu.

To create these variants, you can pass different properties into a <SelectOption> component.

This example provides examples of:

  • An option with a description, which is created by using the description property.
  • An option with a link, which is created by passing a URL into the to property. For external links, use the isExternalLink property so that the option is styled with an outbound link icon.
  • An option with an icon, which is created by using the icon property.
  • An option that is disabled by using the isDisabled property.

With grouped items

To group related select options together, use 1 or more <SelectGroup> components and title each group using the label property.

With validation

To create a toggle with a status, pass in status to the MenuToggle. The default icon associated with each status may be overridden by using the statusIcon property.

When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.

Checkbox select

To let users select multiple list options via checkbox input, use a checkbox select.

To create a checkbox select, pass role="menu" to the <Select>, and hasCheckbox into each <SelectOption> component. To indicate that an option is selected, use the isSelected property.

By default, the menu toggle will display a badge to indicate the number of items that a user has selected.

Typeahead

Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.

To make a typeahead, pass variant=typeahead into the <MenuToggle> component and link an onClick function to the <TextInputGroupMain> component.

Typeahead with create option

If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.

To enable the creation ability, pass a predetermined value into a <SelectOption> component. You can use the placeholder property to change the default text shown in the text input.

The following example outlines the code implementation required to create a working typeahead menu that allows for creation.

Multiple typeahead with chips

A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.

When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.

Multiple typeahead with create option

If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."

Multiple typeahead with checkboxes

By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.

With view more

To reduce the processing load for long select lists, you can add a "View more" action to load additional items.

The following example shows 3 items before the "View more" link, but you can adjust the number of visible items for your use case.

You can add a <MenuFooter> component to a select menu to hold additional actions that users can take on menu items, through elements such as link buttons. A footer will be placed beneath a divider at the end of the select menu.

Props

Select

See the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
togglerequiredSelectToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode)Select toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property.
childrenReact.ReactNodeAnything which can be rendered in a select
classNamestringClasses applied to root element of select
isOpenbooleanFlag to indicate if select is open
isPlainbooleanIndicates if the select should be without the outer box-shadow
isScrollablebooleanIndicates if the select menu should be scrollable
maxMenuHeightstringMaximum height of select menu
menuHeightstringHeight of the select menu
onOpenChange(isOpen: boolean) => voidCallback to allow the select component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys.
onOpenChangeKeysBetastring[]Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable.
onSelect(event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => voidFunction callback when user selects an option.
popperPropsSelectPopperPropsAdditional properties to pass to the popper
roleBetastringDetermines the accessible role of the select. For a checkbox select pass in "menu".
selectedany | any[]Single select option value for single select menus, or array of select option values for multi select. You can also specify isSelected on the SelectOption.
shouldFocusToggleOnSelectbooleanFlag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus.
zIndexnumberz-index of the select menu

SelectOption

See the MenuItem section of the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
childrenReact.ReactNodeAnything which can be rendered in a select option
classNamestringClasses applied to root element of select option
descriptionReact.ReactNodeDescription of the option
hasCheckboxbooleanIndicates the option has a checkbox
iconReact.ReactNodeRender option with icon
isDisabledbooleanIndicates the option is disabled
isExternalLinkbooleanRender an external link icon on focus or hover, and set the link's "target" attribute to a value of "_blank".
isFocusedbooleanIndicates the option is focused
isSelectedbooleanIndicates the option is selected
valueanyIdentifies the component in the Select onSelect callback

SelectGroup

See the MenuGroup section of the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a select group
classNamestringClasses applied to root element of select group
labelstringLabel of the select group

SelectList

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a select list
classNamestringClasses applied to root element of select list
isAriaMultiselectableBetabooleanfalseIndicates to assistive technologies whether more than one item can be selected for a non-checkbox select.
*required
NameTypeDefaultDescription
badgeBadgeProps | React.ReactNodeOptional badge rendered inside the toggle, after the children content
childrenReact.ReactNodeContent rendered inside the toggle
classNamestringAdditional classes added to the toggle
iconReact.ReactNodeOptional icon or image rendered inside the toggle, before the children content. It is recommended to wrap most basic icons in our icon component.
isDisabledbooleanFlag indicating the toggle is disabled
isExpandedbooleanFlag indicating the toggle has expanded styling
isFullHeightbooleanFlag indicating the toggle is full height
isFullWidthbooleanFlag indicating the toggle takes up the full width of its parent
splitButtonOptionsSplitButtonOptionsObject used to configure a split button menu toggle
statusBeta'success' | 'warning' | 'danger'Status styles of the menu toggle
statusIconReact.ReactNodeOverrides the status icon
variant'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead'Variant styles of the menu toggle

SelectToggleProps

*required
NameTypeDefaultDescription
toggleNoderequiredReact.ReactNodeSelect toggle node.
toggleRefReact.RefObject<HTMLButtonElement>Reference to the toggle.

SelectPopperProps

*required
NameTypeDefaultDescription
appendToHTMLElement | (() => HTMLElement) | 'inline'The container to append the select to. Defaults to 'inline'. If your select is being cut off you can append it to an element higher up the DOM tree. Some examples: appendTo="inline" appendTo={() => document.body} appendTo={document.getElementById('target')}
direction'up' | 'down'Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips.
enableFlipbooleanEnable to flip the popper when it reaches the boundary
maxWidthstring | 'trigger'Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width
minWidthstring | 'trigger'Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width
position'right' | 'left' | 'center' | 'start' | 'end'Horizontal position of the popper
preventOverflowbooleanFlag to prevent the popper from overflowing its container and becoming partially obscured.
widthstring | 'trigger'Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-select--pf-v5-global--Color--100
#151515
.pf-v5-c-select--pf-v5-global--Color--200
#6a6e73
.pf-v5-c-select--pf-v5-global--BorderColor--100
#d2d2d2
.pf-v5-c-select--pf-v5-global--primary-color--100
#06c
.pf-v5-c-select--pf-v5-global--link--Color
#06c
.pf-v5-c-select--pf-v5-global--link--Color--hover
#004080
.pf-v5-c-select--pf-v5-global--BackgroundColor--100
#fff
.pf-v5-c-select--pf-v5-global--icon--Color--light
#6a6e73
.pf-v5-c-select--pf-v5-global--icon--Color--dark
#151515
.pf-v5-c-select--pf-v5-c-select__toggle--PaddingTop
0.375rem
.pf-v5-c-select--pf-v5-c-select__toggle--PaddingRight
0.5rem
.pf-v5-c-select--pf-v5-c-select__toggle--PaddingBottom
0.375rem
.pf-v5-c-select--pf-v5-c-select__toggle--PaddingLeft
0.5rem
.pf-v5-c-select--pf-v5-c-select__toggle--MinWidth
44px
.pf-v5-c-select--pf-v5-c-select__toggle--FontSize
1rem
.pf-v5-c-select--pf-v5-c-select__toggle--FontWeight
400
.pf-v5-c-select--pf-v5-c-select__toggle--LineHeight
1.5
.pf-v5-c-select--pf-v5-c-select__toggle--BackgroundColor
#fff
.pf-v5-c-select--pf-v5-c-select__toggle--before--BorderTopWidth
1px
.pf-v5-c-select--pf-v5-c-select__toggle--before--BorderRightWidth
1px
.pf-v5-c-select--pf-v5-c-select__toggle--before--BorderBottomWidth
1px
.pf-v5-c-select--pf-v5-c-select__toggle--before--BorderLeftWidth
1px
.pf-v5-c-select--pf-v5-c-select__toggle--before--BorderWidth
initial
.pf-v5-c-select--pf-v5-c-select__toggle--before--BorderTopColor
#f0f0f0
.pf-v5-c-select--pf-v5-c-select__toggle--before--BorderRightColor
#f0f0f0
.pf-v5-c-select--pf-v5-c-select__toggle--before--BorderBottomColor
#8a8d90
.pf-v5-c-select--pf-v5-c-select__toggle--before--BorderLeftColor
#f0f0f0
.pf-v5-c-select--pf-v5-c-select__toggle--Color
#151515
.pf-v5-c-select--pf-v5-c-select__toggle--hover--before--BorderBottomColor
#06c
.pf-v5-c-select--pf-v5-c-select__toggle--focus--before--BorderBottomColor
#06c
.pf-v5-c-select--pf-v5-c-select__toggle--focus--before--BorderBottomWidth
2px
.pf-v5-c-select--pf-v5-c-select__toggle--active--before--BorderBottomColor
#06c
.pf-v5-c-select--pf-v5-c-select__toggle--active--before--BorderBottomWidth
2px
.pf-v5-c-select--pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor
#06c
.pf-v5-c-select--pf-v5-c-select__toggle--m-expanded--before--BorderBottomWidth
2px
.pf-v5-c-select--pf-v5-c-select__toggle--disabled--BackgroundColor
#f0f0f0
.pf-v5-c-select--pf-v5-c-select__toggle--m-plain--before--BorderColor
transparent
.pf-v5-c-select--pf-v5-c-select__toggle--m-placeholder--Color
transparent
.pf-v5-c-select--pf-v5-c-select--m-invalid__toggle--before--BorderBottomColor
#c9190b
.pf-v5-c-select--pf-v5-c-select--m-invalid__toggle--before--BorderBottomWidth
2px
.pf-v5-c-select--pf-v5-c-select--m-invalid__toggle--hover--before--BorderBottomColor
#c9190b
.pf-v5-c-select--pf-v5-c-select--m-invalid__toggle--focus--before--BorderBottomColor
#c9190b
.pf-v5-c-select--pf-v5-c-select--m-invalid__toggle--active--before--BorderBottomColor
#c9190b
.pf-v5-c-select--pf-v5-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor
#c9190b
.pf-v5-c-select--pf-v5-c-select--m-invalid__toggle-status-icon--Color
#c9190b
.pf-v5-c-select--pf-v5-c-select--m-success__toggle--before--BorderBottomColor
#3e8635
.pf-v5-c-select--pf-v5-c-select--m-success__toggle--before--BorderBottomWidth
2px
.pf-v5-c-select--pf-v5-c-select--m-success__toggle--hover--before--BorderBottomColor
#3e8635
.pf-v5-c-select--pf-v5-c-select--m-success__toggle--focus--before--BorderBottomColor
#3e8635
.pf-v5-c-select--pf-v5-c-select--m-success__toggle--active--before--BorderBottomColor
#3e8635
.pf-v5-c-select--pf-v5-c-select--m-success__toggle--m-expanded--before--BorderBottomColor
#3e8635
.pf-v5-c-select--pf-v5-c-select--m-success__toggle-status-icon--Color
#3e8635
.pf-v5-c-select--pf-v5-c-select--m-warning__toggle--before--BorderBottomColor
#f0ab00
.pf-v5-c-select--pf-v5-c-select--m-warning__toggle--before--BorderBottomWidth
2px
.pf-v5-c-select--pf-v5-c-select--m-warning__toggle--hover--before--BorderBottomColor
#f0ab00
.pf-v5-c-select--pf-v5-c-select--m-warning__toggle--focus--before--BorderBottomColor
#f0ab00
.pf-v5-c-select--pf-v5-c-select--m-warning__toggle--active--before--BorderBottomColor
#f0ab00
.pf-v5-c-select--pf-v5-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor
#f0ab00
.pf-v5-c-select--pf-v5-c-select--m-warning__toggle-status-icon--Color
#f0ab00
.pf-v5-c-select--pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight
0.25rem
.pf-v5-c-select--pf-v5-c-select__toggle-wrapper--MaxWidth
calc(100% - 1.5rem)
.pf-v5-c-select--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginTop
0.3125rem
.pf-v5-c-select--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginBottom
0.3125rem
.pf-v5-c-select--pf-v5-c-select__toggle-typeahead--FlexBasis
10em
.pf-v5-c-select--pf-v5-c-select__toggle-typeahead--BackgroundColor
transparent
.pf-v5-c-select--pf-v5-c-select__toggle-typeahead--BorderTop
1px solid transparent
.pf-v5-c-select--pf-v5-c-select__toggle-typeahead--BorderRight
none
.pf-v5-c-select--pf-v5-c-select__toggle-typeahead--BorderLeft
none
.pf-v5-c-select--pf-v5-c-select__toggle-typeahead--MinWidth
7.5rem
.pf-v5-c-select--pf-v5-c-select__toggle--m-placeholder__toggle-text--Color
#6a6e73
.pf-v5-c-select--pf-v5-c-select__toggle-icon--toggle-text--MarginLeft
0.25rem
.pf-v5-c-select--pf-v5-c-select__toggle-badge--PaddingLeft
0.5rem
.pf-v5-c-select--pf-v5-c-select__toggle-status-icon--MarginLeft
0.25rem
.pf-v5-c-select--pf-v5-c-select__toggle-status-icon--Color
#151515
.pf-v5-c-select--pf-v5-c-select__toggle-arrow--MarginLeft
1rem
.pf-v5-c-select--pf-v5-c-select__toggle-arrow--MarginRight
0.5rem
.pf-v5-c-select--pf-v5-c-select__toggle-arrow--with-clear--MarginLeft
0.5rem
.pf-v5-c-select--pf-v5-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate
180deg
.pf-v5-c-select--pf-v5-c-select--m-plain__toggle-arrow--Color
#6a6e73
.pf-v5-c-select--pf-v5-c-select--m-plain--hover__toggle-arrow--Color
#151515
.pf-v5-c-select--pf-v5-c-select__toggle-clear--PaddingRight
0.5rem
.pf-v5-c-select--pf-v5-c-select__toggle-clear--PaddingLeft
1rem
.pf-v5-c-select--pf-v5-c-select__toggle-clear--toggle-button--PaddingLeft
0.5rem
.pf-v5-c-select--pf-v5-c-select__toggle-button--Color
#151515
.pf-v5-c-select--pf-v5-c-select__menu--BackgroundColor
#fff
.pf-v5-c-select--pf-v5-c-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-v5-c-select--pf-v5-c-select__menu--PaddingTop
0.5rem
.pf-v5-c-select--pf-v5-c-select__menu--PaddingBottom
0.5rem
.pf-v5-c-select--pf-v5-c-select__menu--Top
calc(100% + 0.25rem)
.pf-v5-c-select--pf-v5-c-select__menu--ZIndex
200
.pf-v5-c-select--pf-v5-c-select__menu--Width
auto
.pf-v5-c-select--pf-v5-c-select__menu--MinWidth
100%
.pf-v5-c-select--pf-v5-c-select__menu--m-top--TranslateY
calc(-100% - 0.25rem)
.pf-v5-c-select--pf-v5-c-select__list-item--m-loading--PaddingTop
0.5rem
.pf-v5-c-select--pf-v5-c-select__menu-item--PaddingTop
0.5rem
.pf-v5-c-select--pf-v5-c-select__menu-item--PaddingRight
1rem
.pf-v5-c-select--pf-v5-c-select__menu-item--m-selected--PaddingRight
3rem
.pf-v5-c-select--pf-v5-c-select__menu-item--PaddingBottom
0.5rem
.pf-v5-c-select--pf-v5-c-select__menu-item--PaddingLeft
1rem
.pf-v5-c-select--pf-v5-c-select__menu-item--FontSize
1rem
.pf-v5-c-select--pf-v5-c-select__menu-item--FontWeight
400
.pf-v5-c-select--pf-v5-c-select__menu-item--LineHeight
1.5
.pf-v5-c-select--pf-v5-c-select__menu-item--Color
#151515
.pf-v5-c-select--pf-v5-c-select__menu-item--disabled--Color
#6a6e73
.pf-v5-c-select--pf-v5-c-select__menu-item--Width
100%
.pf-v5-c-select--pf-v5-c-select__menu-item--hover--BackgroundColor
#f0f0f0
.pf-v5-c-select--pf-v5-c-select__menu-item--focus--BackgroundColor
#f0f0f0
.pf-v5-c-select--pf-v5-c-select__menu-item--disabled--BackgroundColor
transparent
.pf-v5-c-select--pf-v5-c-select__menu-item--m-link--Width
auto
.pf-v5-c-select--pf-v5-c-select__menu-item--m-link--hover--BackgroundColor
transparent
.pf-v5-c-select--pf-v5-c-select__menu-item--m-link--focus--BackgroundColor
transparent
.pf-v5-c-select--pf-v5-c-select__menu-item--m-action--Color
#6a6e73
.pf-v5-c-select--pf-v5-c-select__menu-item--m-action--hover--Color
#151515
.pf-v5-c-select--pf-v5-c-select__menu-item--m-action--focus--Color
#151515
.pf-v5-c-select--pf-v5-c-select__menu-item--m-action--disabled--Color
#d2d2d2
.pf-v5-c-select--pf-v5-c-select__menu-item--m-action--Width
auto
.pf-v5-c-select--pf-v5-c-select__menu-item--m-action--FontSize
0.75rem
.pf-v5-c-select--pf-v5-c-select__menu-item--m-action--hover--BackgroundColor
transparent
.pf-v5-c-select--pf-v5-c-select__menu-item--m-action--focus--BackgroundColor
transparent
.pf-v5-c-select--pf-v5-c-select__menu-item--hover__menu-item--m-action--Color
#6a6e73
.pf-v5-c-select--pf-v5-c-select__menu-item--m-favorite-action--Color
#6a6e73
.pf-v5-c-select--pf-v5-c-select__menu-item--m-favorite-action--hover--Color
#151515
.pf-v5-c-select--pf-v5-c-select__menu-item--m-favorite-action--focus--Color
#151515
.pf-v5-c-select--pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color
#f0ab00
.pf-v5-c-select--pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color
#c58c00
.pf-v5-c-select--pf-v5-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color
#c58c00
.pf-v5-c-select--pf-v5-c-select__menu-item--m-load--Color
#06c
.pf-v5-c-select--pf-v5-c-select__menu-item-icon--Color
#06c
.pf-v5-c-select--pf-v5-c-select__menu-item-icon--FontSize
0.75rem
.pf-v5-c-select--pf-v5-c-select__menu-item-icon--Right
1rem
.pf-v5-c-select--pf-v5-c-select__menu-item-icon--Top
50%
.pf-v5-c-select--pf-v5-c-select__menu-item-icon--TranslateY
-50%
.pf-v5-c-select--pf-v5-c-select__menu-item-action-icon--MinHeight
calc(1rem * 1.5)
.pf-v5-c-select--pf-v5-c-select__menu-item--match--FontWeight
700
.pf-v5-c-select--pf-v5-c-select__menu-search--PaddingTop
0.5rem
.pf-v5-c-select--pf-v5-c-select__menu-search--PaddingRight
1rem
.pf-v5-c-select--pf-v5-c-select__menu-search--PaddingBottom
1rem
.pf-v5-c-select--pf-v5-c-select__menu-search--PaddingLeft
1rem
.pf-v5-c-select--pf-v5-c-select__menu-group--menu-group--PaddingTop
0.5rem
.pf-v5-c-select--pf-v5-c-select__menu-group-title--PaddingTop
0.5rem
.pf-v5-c-select--pf-v5-c-select__menu-group-title--PaddingRight
1rem
.pf-v5-c-select--pf-v5-c-select__menu-group-title--PaddingBottom
0.5rem
.pf-v5-c-select--pf-v5-c-select__menu-group-title--PaddingLeft
1rem
.pf-v5-c-select--pf-v5-c-select__menu-group-title--FontSize
0.75rem
.pf-v5-c-select--pf-v5-c-select__menu-group-title--FontWeight
400
.pf-v5-c-select--pf-v5-c-select__menu-group-title--Color
#6a6e73
.pf-v5-c-select--pf-v5-c-select__menu-item-count--MarginLeft
1rem
.pf-v5-c-select--pf-v5-c-select__menu-item-count--FontSize
0.875rem
.pf-v5-c-select--pf-v5-c-select__menu-item-count--Color
#6a6e73
.pf-v5-c-select--pf-v5-c-select__menu-item--disabled__menu-item-count--Color
#6a6e73
.pf-v5-c-select--pf-v5-c-select__menu-item-description--FontSize
0.75rem
.pf-v5-c-select--pf-v5-c-select__menu-item-description--Color
#6a6e73
.pf-v5-c-select--pf-v5-c-select__menu-item-description--PaddingRight
1rem
.pf-v5-c-select--pf-v5-c-select__menu-item-main--PaddingRight
1rem
.pf-v5-c-select--pf-v5-c-select__menu-item--m-selected__menu-item-main--PaddingRight
3rem
.pf-v5-c-select--pf-v5-c-select__menu-footer--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-v5-c-select--pf-v5-c-select__menu-footer--PaddingTop
1rem
.pf-v5-c-select--pf-v5-c-select__menu-footer--PaddingRight
1rem
.pf-v5-c-select--pf-v5-c-select__menu-footer--PaddingBottom
1rem
.pf-v5-c-select--pf-v5-c-select__menu-footer--PaddingLeft
1rem
.pf-v5-c-select--pf-v5-c-select__menu-footer--MarginTop
0.5rem
.pf-v5-c-select--pf-v5-c-select__menu-footer--MarginBottom
calc(0.5rem * -1)
.pf-v5-c-select--pf-v5-c-select-menu--c-divider--MarginTop
0.5rem
.pf-v5-c-select--pf-v5-c-select-menu--c-divider--MarginBottom
0.5rem
.pf-v5-c-select .pf-v5-c-divider:last-child--pf-v5-c-select-menu--c-divider--MarginBottom
0
.pf-v5-c-select.pf-m-invalid--pf-v5-c-select__toggle--before--BorderBottomColor
#c9190b
.pf-v5-c-select.pf-m-invalid--pf-v5-c-select__toggle--before--BorderBottomWidth
2px
.pf-v5-c-select.pf-m-invalid--pf-v5-c-select__toggle--hover--before--BorderBottomColor
#c9190b
.pf-v5-c-select.pf-m-invalid--pf-v5-c-select__toggle--focus--before--BorderBottomColor
#c9190b
.pf-v5-c-select.pf-m-invalid--pf-v5-c-select__toggle--active--before--BorderBottomColor
#c9190b
.pf-v5-c-select.pf-m-invalid--pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor
#c9190b
.pf-v5-c-select.pf-m-invalid--pf-v5-c-select__toggle-status-icon--Color
#c9190b
.pf-v5-c-select.pf-m-success--pf-v5-c-select__toggle--before--BorderBottomColor
#3e8635
.pf-v5-c-select.pf-m-success--pf-v5-c-select__toggle--before--BorderBottomWidth
2px
.pf-v5-c-select.pf-m-success--pf-v5-c-select__toggle--hover--before--BorderBottomColor
#3e8635
.pf-v5-c-select.pf-m-success--pf-v5-c-select__toggle--focus--before--BorderBottomColor
#3e8635
.pf-v5-c-select.pf-m-success--pf-v5-c-select__toggle--active--before--BorderBottomColor
#3e8635
.pf-v5-c-select.pf-m-success--pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor
#3e8635
.pf-v5-c-select.pf-m-success--pf-v5-c-select__toggle-status-icon--Color
#3e8635
.pf-v5-c-select.pf-m-warning--pf-v5-c-select__toggle--before--BorderBottomColor
#f0ab00
.pf-v5-c-select.pf-m-warning--pf-v5-c-select__toggle--before--BorderBottomWidth
2px
.pf-v5-c-select.pf-m-warning--pf-v5-c-select__toggle--hover--before--BorderBottomColor
#f0ab00
.pf-v5-c-select.pf-m-warning--pf-v5-c-select__toggle--focus--before--BorderBottomColor
#f0ab00
.pf-v5-c-select.pf-m-warning--pf-v5-c-select__toggle--active--before--BorderBottomColor
#f0ab00
.pf-v5-c-select.pf-m-warning--pf-v5-c-select__toggle--m-expanded--before--BorderBottomColor
#f0ab00
.pf-v5-c-select.pf-m-warning--pf-v5-c-select__toggle-status-icon--Color
#f0ab00