React

FormSelect

Form select is used to embed browser native select lists into a form. Related design guidelines: Data input

ExamplesPropsCSS Variables

Examples

Simple form select

Copied to clipboard

Invalid form select

Copied to clipboard

Disabled form select

Copied to clipboard

Grouped form select

Copied to clipboard

Props

FormSelect Props

The FormSelect component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodecontent rendered inside the FormSelect
classNamestring''additional classes added to the FormSelect control
valueany''value of selected option
isValidbooltrueFlag indicating selection is valid
isDisabledboolfalseFlag indicating the FormSelect is disabled
onBlurfunc() => undefinedOptional callback for updating when selection loses focus
onFocusfunc() => undefinedOptional callback for updating when selection gets focus
onChangefunc() => undefinedOptional callback for updating when selection changes
aria-labelcustomnullCustom flag to show that the FormSelect requires an associated id or aria-label.
anyAdditional props are spread to the container <select>

FormSelectOption Props

The FormSelectOption component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''additional classes added to the Select Option
valueany''the value for the option
labelstringthe label for the option
isDisabledboolfalseflag indicating if the option is disabled
anyAdditional props are spread to the container <option>

FormSelectOptionGroup Props

The FormSelectOptionGroup component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullcontent rendered inside the Select Option Group
classNamestring''additional classes added to the Select Option
labelstringthe label for the option
isDisabledboolfalseflag indicating if the Option Group is disabled
anyAdditional props are spread to the container <optgroup>

CSS Variables

--pf-c-form-control--BackgroundColorc_form_control_BackgroundColor#ededed
--pf-c-form-control--BorderBottomColorc_form_control_BorderBottomColor#c9190b
--pf-c-form-control--BorderLeftColorc_form_control_BorderLeftColor#ededed
--pf-c-form-control--BorderRadiusc_form_control_BorderRadius0
--pf-c-form-control--BorderRightColorc_form_control_BorderRightColor#ededed
--pf-c-form-control--BorderTopColorc_form_control_BorderTopColor#ededed
--pf-c-form-control--BorderWidthc_form_control_BorderWidth1px
--pf-c-form-control--Colorc_form_control_Color#72767b
--pf-c-form-control--FontSizec_form_control_FontSize1rem
--pf-c-form-control--Heightc_form_control_Heightcalc(1rem * 1.5 + 1px * 2 + calc(0.375rem - 1px) + calc(0.375rem - 1px))
--pf-c-form-control--LineHeightc_form_control_LineHeight1.5
--pf-c-form-control--PaddingBottomc_form_control_PaddingBottomcalc(0.375rem - 1px)
--pf-c-form-control--PaddingLeftc_form_control_PaddingLeft0.5rem
--pf-c-form-control--PaddingRightc_form_control_PaddingRightcalc(0.5rem + 3rem)
--pf-c-form-control--PaddingTopc_form_control_PaddingTopcalc(0.375rem - 1px)
--pf-c-form-control__select--Backgroundc_form_control__select_Background#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--BackgroundPositionc_form_control__select_BackgroundPositioncalc(100% - 0.5rem) center
--pf-c-form-control__select--BackgroundSizec_form_control__select_BackgroundSize0.875rem
--pf-c-form-control__select--BackgroundUrlc_form_control__select_BackgroundUrlurl("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E")
--pf-c-form-control__select--PaddingRightc_form_control__select_PaddingRight1.5rem
--pf-c-form-control__select--arrow--Backgroundc_form_control__select_arrow_Background#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--invalid--Backgroundc_form_control__select_invalid_Backgroundurl("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat,#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control__select--invalid--PaddingRightc_form_control__select_invalid_PaddingRightcalc(0.5rem + 3rem)
--pf-c-form-control--disabled--BackgroundColorc_form_control_disabled_BackgroundColor#ededed
--pf-c-form-control--disabled--BorderColorc_form_control_disabled_BorderColortransparent
--pf-c-form-control--disabled--Colorc_form_control_disabled_Color#72767b
--pf-c-form-control--focus--BorderBottomColorc_form_control_focus_BorderBottomColor#06c
--pf-c-form-control--focus--BorderBottomWidthc_form_control_focus_BorderBottomWidth2px
--pf-c-form-control--focus--PaddingBottomc_form_control_focus_PaddingBottomcalc(0.375rem - 2px)
--pf-c-form-control--hover--BorderBottomColorc_form_control_hover_BorderBottomColor#06c
--pf-c-form-control--invalid--Backgroundc_form_control_invalid_Backgroundurl("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat,#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center/0.875rem no-repeat
--pf-c-form-control--invalid--BackgroundPositionc_form_control_invalid_BackgroundPositioncalc(100% - 0.5rem - 1.5rem)
--pf-c-form-control--invalid--BackgroundSizec_form_control_invalid_BackgroundSize1rem 1rem
--pf-c-form-control--invalid--BackgroundUrlc_form_control_invalid_BackgroundUrlurl("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E")
--pf-c-form-control--invalid--BorderBottomColorc_form_control_invalid_BorderBottomColor#c9190b
--pf-c-form-control--invalid--BorderBottomWidthc_form_control_invalid_BorderBottomWidth2px
--pf-c-form-control--invalid--PaddingBottomc_form_control_invalid_PaddingBottomcalc(0.375rem - 2px)
--pf-c-form-control--invalid--PaddingRightc_form_control_invalid_PaddingRight2rem
--pf-c-form-control--invalid--exclamation--Backgroundc_form_control_invalid_exclamation_Backgroundurl("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) 0.5rem/1rem 1rem no-repeat
--pf-c-form-control--placeholder--Colorc_form_control_placeholder_Color#72767b
--pf-c-form-control--readonly--focus--BackgroundColorc_form_control_readonly_focus_BackgroundColor#ededed
--pf-c-form-control--readonly--focus--BorderBottomColorc_form_control_readonly_focus_BorderBottomColor#72767b
--pf-c-form-control--readonly--focus--BorderBottomWidthc_form_control_readonly_focus_BorderBottomWidth1px
--pf-c-form-control--readonly--focus--PaddingBottomc_form_control_readonly_focus_PaddingBottomcalc(0.375rem - 1px)