Skip to content
PatternFly logo

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.

A newer React implementation of the select will replace the existing implementation at the next major release. The documentation for the newer implementation is under the React next tab, and this newer implementation can be imported from @patternfly/react-core/next.

Single

Single select

Single expanded

Single with top expanded

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.

Usage

Class
Applied to
Outcome
.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-select
Modifies the select menu to display above the toggle.
.pf-m-align-right
.pf-c-select__menu
Modifies the select menu to display right aligned to the toggle.
.pf-m-static
.pf-c-select__menu
Modifies the select menu to be statically positioned to support custom positioning.
.pf-m-active
.pf-c-select
Forces display of the active state of the toggle.

States

Disabled

Success

Warning

Invalid

Accessibility

Attribute
Applied to
Outcome
aria-invalid="true"
.pf-c-select__toggle
Indicates that the select is in the invalid state.
aria-selected="true"
.pf-c-select__menu-item
Should be set programmatically to indicate the active item.
disabled
.pf-c-select__toggle
Disables the dropdown toggle and removes it from keyboard focus.

Usage

Class
Applied to
Outcome
.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-select
Indicates the select is expanded.
.pf-m-success
.pf-c-select
Modifies select component for the success state.
.pf-m-warning
.pf-c-select
Modifies select component for the warning state.
.pf-m-invalid
.pf-c-select
Modifies select component for the invalid state.
.pf-m-selected
.pf-c-select__menu-item
Indicates the menu item is selected.
.pf-m-disabled
div.pf-c-select__toggle
Modifies 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

Typeahead

Single with typeahead

Single with typeahead expanded

Single with typeahead expanded and selected

Disabled with typeahead

Invalid 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

Attribute
Applied to
Outcome
aria-selected="true"
.pf-c-select__menu-item
Should be set programmatically to indicate the active item.

Usage

Class
Applied to
Outcome
.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-typeahead
input.pf-c-form-control
Initiates the input field for typeahead.
.pf-c-select__toggle-clear
button.pf-c-button.pf-m-plain
Initiates a clear button in the toggle.
.pf-c-select__toggle-button
button.pf-c-button.pf-m-plain
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-select
Indicates the select is expanded.
.pf-m-typeahead
.pf-c-select__toggle
Indicates the select has a typeahead.
.pf-m-focus
.pf-c-select__menu-item
Modifies the menu item to apply :focus styling. For use when navigating the menu items by keyboard when the typeahead input field has browser focus.

Typeahead multiselect

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

Multi with typeahead invalid

  • Arkansas
  • Massachusetts
  • New Mexico
  • Ohio
  • Washington

The multiselect 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

Attribute
Applied to
Outcome
aria-selected="true"
.pf-c-select__menu-item
Should be set programmatically to indicate the active item.

Usage

Class
Applied to
Outcome
.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-typeahead
input.pf-c-form-control
Initiates the input field for typeahead.
.pf-c-select__toggle-clear
button.pf-m-plain
Initiates 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-select
Indicates the select is expanded.
.pf-m-typeahead
.pf-c-select__toggle
Indicates the select has a typeahead.

Checkbox

Checkbox select

Checkbox expanded

Checkbox expanded and selected with groups

Checkbox expanded and selected with groups and filter

Checkbox expanded without badge

Checkbox with counts

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

Class
Applied to
Outcome
.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-typeahead
input.pf-c-form-control
Initiates 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-clear
button.pf-m-plain
Initiates 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-item
div.pf-c-check
Initiates the items in the select dropdown menu.
.pf-c-select__menu-item-row
<span>
Initiates a menu item row for use with positioning other elements before/after the item text.
.pf-c-select__menu-item-text
<span>
Initiates the menu item row text.
.pf-c-select__menu-item-count
<span>
Initiates the menu item row count.
.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-select
Indicates the select is expanded.
.pf-m-typeahead
.pf-c-select__toggle
Indicates the select has a typeahead.

Plain

Plain toggle

Plain toggle expanded

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

Usage

Class
Applied to
Outcome
.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-select
Indicates the select is expanded.
.pf-m-plain
.pf-c-select__toggle
Modifies to display the toggle with no border.
.pf-m-selected
.pf-c-select__menu-item
Indicates the menu item is selected.

Icon

Toggle icon

Accessibility

Attribute
Applied to
Outcome
aria-hidden="true"
.pf-c-select__toggle-icon
Hides the icon from assistive technologies.

Usage

Class
Applied to
Outcome
.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 menu

[Panel contents here]

Usage

Class
Applied to
Outcome
.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.

Description

Item description

Checkbox item description

Usage

Class
Applied to
Outcome
.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-item
Modifies the select menu item when selected to accommodate the description element.

Favorites

Accessibility

Attribute
Applied to
Outcome
aria-label="Not starred"
.pf-c-select__menu-wrapper > .pf-c-select__menu-item.pf-m-action
Provides 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-action
Provides an accessible label indicating that the favorite action is selected.

Usage

Class
Applied to
Outcome
.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-wrapper
Modifies wrapper to indicate that the item row has been favorited.
.pf-m-favorite-action
.pf-c-select__menu-item
Modifies an item for favorite styles.
.pf-m-link
.pf-c-select__menu-item.pf-m-wrapper > .pf-c-select__menu-item
Modifies item for link styles.
.pf-m-action
.pf-c-select__menu-item.pf-m-wrapper > .pf-c-select__menu-item
Modifies item to for action styles.

View more

View more menu item

Usage

Class
Applied to
Outcome
.pf-m-load
.pf-c-select__menu-item
Modifies a menu item for load styles.

Loading

Loading menu item

Usage

Class
Applied to
Outcome
.pf-c-select__list-item
<li>
Defines a list item element in the select menu.
.pf-m-loading
.pf-c-select__list-item
Modifies a list item for loading styles.

Usage

Class
Applied to
Outcome
.pf-c-select__menu-footer
<div>
Defines a menu footer.
.pf-c-select__menu-list
<ul>
Defines the menu list when the list is placed in div.pf-c-select__menu.

Placeholder

Placeholder collapsed

Placeholder expanded

Placeholder item disabled

Placeholder item enabled

Usage

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

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines