HTML

Select

ExamplesDocumentationCSS variables

Examples

Select - single

Copied to clipboard

Select - disabled

Copied to clipboard

Select - single (expanded)

Copied to clipboard

Select - single (top expanded)

Copied to clipboard

Select - single (expanded and selected)

Copied to clipboard

Select - single with typeahead

Copied to clipboard

Select - single with typeahead (expanded)

Copied to clipboard

Select - single with typeahead (expanded and selected)

Copied to clipboard

Select - multi with typeahead

Copied to clipboard

Select - multi with typeahead (expanded, chip group expanded)

Copied to clipboard

Select - multi with typeahead (expanded, chip group collapsed)

Copied to clipboard

Select - checkbox

Copied to clipboard

Select - checkbox (expanded)

Copied to clipboard

Select - checkbox (expanded and selected with groups)

Copied to clipboard

Select - plain

Copied to clipboard

Select - plain (expanded)

Copied to clipboard

Select - icon

Copied to clipboard

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.

CSS variables

--pf-c-select__menu--BackgroundColorc_select__menu_BackgroundColor#fff
--pf-c-select__menu--BorderWidthc_select__menu_BorderWidth1px
--pf-c-select__menu--BoxShadowc_select__menu_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-select__menu--PaddingBottomc_select__menu_PaddingBottom0.5rem
--pf-c-select__menu--PaddingTopc_select__menu_PaddingTop0.5rem
--pf-c-select__menu--Topc_select__menu_Topcalc(100% + 0.25rem)
--pf-c-select__menu--ZIndexc_select__menu_ZIndex200
--pf-c-select__menu-group--not-first--PaddingTopc_select__menu_group_not_first_PaddingTop0.5rem
--pf-c-select__menu-group-title--Colorc_select__menu_group_title_Color#737679
--pf-c-select__menu-group-title--FontSizec_select__menu_group_title_FontSize0.875rem
--pf-c-select__menu-group-title--FontWeightc_select__menu_group_title_FontWeight700
--pf-c-select__menu-group-title--PaddingBottomc_select__menu_group_title_PaddingBottom0.5rem
--pf-c-select__menu-group-title--PaddingLeftc_select__menu_group_title_PaddingLeft1rem
--pf-c-select__menu-group-title--PaddingRightc_select__menu_group_title_PaddingRight1rem
--pf-c-select__menu-group-title--PaddingTopc_select__menu_group_title_PaddingTop0.5rem
--pf-c-select__menu-item--Colorc_select__menu_item_Color#151515
--pf-c-select__menu-item--FontSizec_select__menu_item_FontSize1rem
--pf-c-select__menu-item--FontWeightc_select__menu_item_FontWeight400
--pf-c-select__menu-item--LineHeightc_select__menu_item_LineHeight1.5
--pf-c-select__menu-item--PaddingBottomc_select__menu_item_PaddingBottom0.5rem
--pf-c-select__menu-item--PaddingLeftc_select__menu_item_PaddingLeft1rem
--pf-c-select__menu-item--PaddingRightc_select__menu_item_PaddingRight3rem
--pf-c-select__menu-item--PaddingTopc_select__menu_item_PaddingTop0.5rem
--pf-c-select__menu-item--disabled--BackgroundColorc_select__menu_item_disabled_BackgroundColortransparent
--pf-c-select__menu-item--disabled--Colorc_select__menu_item_disabled_Color#737679
--pf-c-select__menu-item--hover--BackgroundColorc_select__menu_item_hover_BackgroundColor#ededed
--pf-c-select__menu-item-icon--Colorc_select__menu_item_icon_Color#06c
--pf-c-select__menu-item-icon--FontSizec_select__menu_item_icon_FontSize0.625rem
--pf-c-select__menu-item-icon--Rightc_select__menu_item_icon_Right1rem
--pf-c-select__menu-item-icon--Topc_select__menu_item_icon_Top50%
--pf-c-select__menu-item-icon--Transformc_select__menu_item_icon_TransformtranslateY(-50%)
--pf-c-select__menu-item--m-selected--PaddingRightc_select__menu_item_m_selected_PaddingRight3rem
--pf-c-select__menu-item--match--FontWeightc_select__menu_item_match_FontWeight700
--pf-c-select__menu--m-top--Transformc_select__menu_m_top_TransformtranslateY(calc(-100% - 0.25rem))
--pf-c-select__separator--BackgroundColorc_select__separator_BackgroundColor#ededed
--pf-c-select__separator--Heightc_select__separator_Height1px
--pf-c-select__separator--MarginBottomc_select__separator_MarginBottom0.5rem
--pf-c-select__separator--MarginTopc_select__separator_MarginTop0.5rem
--pf-c-select__toggle--BackgroundColorc_select__toggle_BackgroundColor#ededed
--pf-c-select__toggle--BorderBottomColorc_select__toggle_BorderBottomColor#06c
--pf-c-select__toggle--BorderLeftColorc_select__toggle_BorderLeftColor#ededed
--pf-c-select__toggle--BorderRightColorc_select__toggle_BorderRightColor#ededed
--pf-c-select__toggle--BorderTopColorc_select__toggle_BorderTopColor#ededed
--pf-c-select__toggle--BorderWidthc_select__toggle_BorderWidth1px
--pf-c-select__toggle--Colorc_select__toggle_Color#151515
--pf-c-select__toggle--FontSizec_select__toggle_FontSize1rem
--pf-c-select__toggle--FontWeightc_select__toggle_FontWeight400
--pf-c-select__toggle--LineHeightc_select__toggle_LineHeight1.5
--pf-c-select__toggle--MinWidthc_select__toggle_MinWidth44px
--pf-c-select__toggle--PaddingBottomc_select__toggle_PaddingBottom0
--pf-c-select__toggle--PaddingLeftc_select__toggle_PaddingLeft0.5rem
--pf-c-select__toggle--PaddingRightc_select__toggle_PaddingRight0
--pf-c-select__toggle--PaddingTopc_select__toggle_PaddingTop0
--pf-c-select__toggle--active--BorderBottomColorc_select__toggle_active_BorderBottomColor#06c
--pf-c-select__toggle--active--BorderBottomWidthc_select__toggle_active_BorderBottomWidth2px
--pf-c-select__toggle-arrow--MarginLeftc_select__toggle_arrow_MarginLeft1rem
--pf-c-select__toggle-arrow--MarginRightc_select__toggle_arrow_MarginRight0.5rem
--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Transformc_select__toggle_arrow_m_top_m_expanded__toggle_arrow_Transformrotate(180deg)
--pf-c-select__toggle-arrow--with-clear--MarginLeftc_select__toggle_arrow_with_clear_MarginLeft0.5rem
--pf-c-select__toggle-badge--PaddingLeftc_select__toggle_badge_PaddingLeft0.5rem
--pf-c-select__toggle-button--Colorc_select__toggle_button_Color#151515
--pf-c-select__toggle-button--PaddingLeftc_select__toggle_button_PaddingLeft0.5rem
--pf-c-select__toggle-clear--PaddingLeftc_select__toggle_clear_PaddingLeft1rem
--pf-c-select__toggle-clear--PaddingRightc_select__toggle_clear_PaddingRight0.5rem
--pf-c-select__toggle--disabled--BackgroundColorc_select__toggle_disabled_BackgroundColor#ededed
--pf-c-select__toggle--expanded--BorderBottomColorc_select__toggle_expanded_BorderBottomColor#06c
--pf-c-select__toggle--expanded--BorderBottomWidthc_select__toggle_expanded_BorderBottomWidth2px
--pf-c-select__toggle--hover--BorderBottomColorc_select__toggle_hover_BorderBottomColor#06c
--pf-c-select__toggle-icon--toggle-text--MarginLeftc_select__toggle_icon_toggle_text_MarginLeft0.25rem
--pf-c-select__toggle--m-plain--BorderColorc_select__toggle_m_plain_BorderColortransparent
--pf-c-select__toggle--m-plain--Colorc_select__toggle_m_plain_Color#151515
--pf-c-select__toggle--m-plain--hover--Colorc_select__toggle_m_plain_hover_Color#151515
--pf-c-select__toggle-typeahead--BackgroundColorc_select__toggle_typeahead_BackgroundColortransparent
--pf-c-select__toggle-typeahead--BorderLeftc_select__toggle_typeahead_BorderLeftnone
--pf-c-select__toggle-typeahead--BorderRightc_select__toggle_typeahead_BorderRightnone
--pf-c-select__toggle-typeahead--BorderTopc_select__toggle_typeahead_BorderTopnone
--pf-c-select__toggle-typeahead--FlexBasisc_select__toggle_typeahead_FlexBasis10em
--pf-c-select__toggle-typeahead--active--PaddingBottomc_select__toggle_typeahead_active_PaddingBottomcalc(0.375rem - 1px)
--pf-c-select__toggle-typeahead-form--MinWidthc_select__toggle_typeahead_form_MinWidth7.5rem
--pf-c-select__toggle-wrapper--MaxWidthc_select__toggle_wrapper_MaxWidthcalc(100% - 1.5rem)
--pf-c-select__toggle-wrapper--c-chip--c-button--PaddingBottomc_select__toggle_wrapper_c_chip_c_button_PaddingBottom0.25rem
--pf-c-select__toggle-wrapper--c-chip--c-button--PaddingTopc_select__toggle_wrapper_c_chip_c_button_PaddingTop0.25rem
--pf-c-select__toggle-wrapper--c-chip-group--MarginBottomc_select__toggle_wrapper_c_chip_group_MarginBottom0.25rem
--pf-c-select__toggle-wrapper--c-chip-group--MarginTopc_select__toggle_wrapper_c_chip_group_MarginTop0.5rem
--pf-c-select__toggle-wrapper--m-typeahead--PaddingTopc_select__toggle_wrapper_m_typeahead_PaddingTop0
--pf-c-select__toggle-wrapper--not-last-child--MarginRightc_select__toggle_wrapper_not_last_child_MarginRight0.25rem