HTML

Form control

ExamplesDocumentationCSS Variables

Examples

Input example







Copied to clipboard

Select example





Copied to clipboard

Textarea example



Copied to clipboard

Documentation

Overview

Input, textarea, and select are provided in the form controls component for use cases outside of forms. If they are used without label text ensure some sort of label for assistive technologies. (for example: aria-label)

Usage

Class Applied to Outcome
.pf-c-form-control <input>,<textarea>, <select> Initiates an input, textarea or select. For styling of checkboxes or radios see the check component. Required

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)