Patternfly Logo

Form control

Examples

Input





















Select











Textarea













Documentation

Accessibility

AttributeApplied toOutcome
id.pf-c-form-controlProvides an id value that can be used with the for attribute on an associated <label> element to provide an accessible label for the form control element.
aria-invalid="true".pf-c-form-controlIndicates that the form control is in the error state and applies error state styling.
aria-label="descriptive text".pf-c-form-controlProvides an accessible label for assistive technology.
aria-expanded="true".pf-c-form-control.pf-m-expandedIndicates that clicking in the form control has toggled something else to be expanded.

Usage

ClassApplied toOutcome
.pf-c-form-control<input>,<textarea>, <select>Initiates an input, textarea or select. For styling of checkboxes or radios see the check component. Required
.pf-m-resize-verticaltextarea.pf-m-form-controlModifies a textarea.pf-c-form-control element so it can only be resized vertically along the y-axis.
.pf-m-resize-horizontaltextarea.pf-m-form-controlModifies a textarea.pf-c-form-control element so it can only be resized horizontally along the x-axis.
.pf-m-success.pf-c-form-controlModifies a form control for the success state.
.pf-m-warning.pf-c-form-controlModifies a form control for the warning state.
.pf-m-search.pf-c-form-controlModifies a form control for the search input.
.pf-m-iconinput.pf-c-form-controlModifies a form control text input to be able to specify a custom SVG background via --pf-c-form-control--m-icon--BackgroundUrl, and other optional vars for other background properties.
.pf-m-calendar.pf-c-form-control.pf-m-iconModifies a form control to support the calendar icon.
.pf-m-clock.pf-c-form-control.pf-m-iconModifies a form control to support the clock icon.
.pf-m-expandedinput.pf-c-form-controlModifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed.

CSS variables

.pf-c-form-control--pf-global--Color--100
#151515
.pf-c-form-control--pf-global--Color--200
#6a6e73
.pf-c-form-control--pf-global--BorderColor--100
#d2d2d2
.pf-c-form-control--pf-global--primary-color--100
#06c
.pf-c-form-control--pf-global--link--Color
#06c
.pf-c-form-control--pf-global--link--Color--hover
#004080
.pf-c-form-control--pf-global--BackgroundColor--100
#fff
.pf-c-form-control--pf-c-form-control--FontSize
1rem
.pf-c-form-control--pf-c-form-control--LineHeight
1.5
.pf-c-form-control--pf-c-form-control--BorderWidth
1px
.pf-c-form-control--pf-c-form-control--BorderTopColor
#f0f0f0
.pf-c-form-control--pf-c-form-control--BorderRightColor
#f0f0f0
.pf-c-form-control--pf-c-form-control--BorderBottomColor
#8a8d90
.pf-c-form-control--pf-c-form-control--BorderLeftColor
#f0f0f0
.pf-c-form-control--pf-c-form-control--BorderRadius
0
.pf-c-form-control--pf-c-form-control--BackgroundColor
#fff
.pf-c-form-control--pf-c-form-control--Height
calc(1rem * 1.5 + 1px * 2 + calc(0.375rem - 1px) + calc(0.375rem - 1px))
.pf-c-form-control--pf-c-form-control--PaddingTop
calc(0.375rem - 1px)
.pf-c-form-control--pf-c-form-control--PaddingBottom
calc(0.375rem - 1px)
.pf-c-form-control--pf-c-form-control--PaddingRight
0.5rem
.pf-c-form-control--pf-c-form-control--PaddingLeft
0.5rem
.pf-c-form-control--pf-c-form-control--hover--BorderBottomColor
#06c
.pf-c-form-control--pf-c-form-control--focus--BorderBottomWidth
2px
.pf-c-form-control--pf-c-form-control--focus--PaddingBottom
calc(0.375rem - 2px)
.pf-c-form-control--pf-c-form-control--focus--BorderBottomColor
#06c
.pf-c-form-control--pf-c-form-control--placeholder--Color
#6a6e73
.pf-c-form-control--pf-c-form-control--disabled--Color
#6a6e73
.pf-c-form-control--pf-c-form-control--disabled--BackgroundColor
#f0f0f0
.pf-c-form-control--pf-c-form-control--disabled--BorderColor
transparent
.pf-c-form-control--pf-c-form-control--readonly--BackgroundColor
#f0f0f0
.pf-c-form-control--pf-c-form-control--readonly--hover--BorderBottomColor
#8a8d90
.pf-c-form-control--pf-c-form-control--readonly--focus--PaddingBottom
calc(0.375rem - 1px)
.pf-c-form-control--pf-c-form-control--readonly--focus--BorderBottomWidth
1px
.pf-c-form-control--pf-c-form-control--readonly--focus--BorderBottomColor
#8a8d90
.pf-c-form-control--pf-c-form-control--success--BorderBottomWidth
2px
.pf-c-form-control--pf-c-form-control--success--PaddingBottom
calc(0.375rem - 2px)
.pf-c-form-control--pf-c-form-control--success--BorderBottomColor
#3e8635
.pf-c-form-control--pf-c-form-control--success--PaddingRight
2rem
.pf-c-form-control--pf-c-form-control--success--BackgroundPosition
calc(100% - 0.5rem) 0.5rem
.pf-c-form-control--pf-c-form-control--success--BackgroundSize
1rem 1rem
.pf-c-form-control--pf-c-form-control--success--BackgroundUrl
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233e8635' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E")
.pf-c-form-control--pf-c-form-control--m-warning--BorderBottomWidth
2px
.pf-c-form-control--pf-c-form-control--m-warning--PaddingBottom
calc(0.375rem - 2px)
.pf-c-form-control--pf-c-form-control--m-warning--BorderBottomColor
#f0ab00
.pf-c-form-control--pf-c-form-control--m-warning--PaddingRight
2rem
.pf-c-form-control--pf-c-form-control--m-warning--BackgroundPosition
calc(100% - calc(0.5rem - 0.0625rem)) 0.5rem
.pf-c-form-control--pf-c-form-control--m-warning--BackgroundSize
1.25rem 1rem
.pf-c-form-control--pf-c-form-control--m-warning--BackgroundUrl
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-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--pf-c-form-control--invalid--BorderBottomWidth
2px
.pf-c-form-control--pf-c-form-control--invalid--PaddingBottom
calc(0.375rem - 2px)
.pf-c-form-control--pf-c-form-control--invalid--BorderBottomColor
#c9190b
.pf-c-form-control--pf-c-form-control--invalid--PaddingRight
2rem
.pf-c-form-control--pf-c-form-control--invalid--BackgroundPosition
calc(100% - 0.5rem) 0.5rem
.pf-c-form-control--pf-c-form-control--invalid--BackgroundSize
1rem 1rem
.pf-c-form-control--pf-c-form-control--invalid--BackgroundUrl
url("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--pf-c-form-control--invalid--exclamation--Background
url("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--pf-c-form-control--invalid--Background
#fff url("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--pf-c-form-control--m-search--PaddingLeft
2rem
.pf-c-form-control--pf-c-form-control--m-search--BackgroundPosition
0.5rem
.pf-c-form-control--pf-c-form-control--m-search--BackgroundSize
1rem 1rem
.pf-c-form-control--pf-c-form-control--m-search--BackgroundUrl
url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E")
.pf-c-form-control--pf-c-form-control__select--PaddingRight
1.5rem
.pf-c-form-control--pf-c-form-control__select--BackgroundUrl
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")
.pf-c-form-control--pf-c-form-control__select--BackgroundSize
.625em
.pf-c-form-control--pf-c-form-control__select--BackgroundPosition
calc(100% - 0.5rem) center
.pf-c-form-control--pf-c-form-control__select--success--PaddingRight
calc(0.5rem + 3rem)
.pf-c-form-control--pf-c-form-control__select--success--BackgroundPosition
calc(100% - 0.5rem - 1.5rem)
.pf-c-form-control--pf-c-form-control__select--m-warning--PaddingRight
calc(0.5rem + 3rem)
.pf-c-form-control--pf-c-form-control__select--m-warning--BackgroundPosition
calc(100% - 0.5rem - 1.5rem + 0.0625rem)
.pf-c-form-control--pf-c-form-control__select--invalid--PaddingRight
calc(0.5rem + 3rem)
.pf-c-form-control--pf-c-form-control__select--invalid--BackgroundPosition
calc(100% - 0.5rem - 1.5rem)
.pf-c-form-control::placeholder--pf-c-form-control--Color
#6a6e73
.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid="true"]):hover--pf-c-form-control--BorderBottomColor
#8a8d90
.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid="true"]):focus--pf-c-form-control--focus--PaddingBottom
calc(0.375rem - 1px)
.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid="true"]):focus--pf-c-form-control--focus--BorderBottomWidth
1px
.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid="true"]):focus--pf-c-form-control--focus--BorderBottomColor
#8a8d90
.pf-c-form-control:hover--pf-c-form-control--BorderBottomColor
#06c
.pf-c-form-control:focus--pf-c-form-control--BorderBottomColor
#06c
.pf-c-form-control:disabled--pf-c-form-control--Color
#6a6e73
.pf-c-form-control:disabled--pf-c-form-control--BackgroundColor
#f0f0f0
.pf-c-form-control[aria-invalid="true"]--pf-c-form-control--PaddingRight
2rem
.pf-c-form-control[aria-invalid="true"]--pf-c-form-control--BorderBottomColor
#c9190b
.pf-c-form-control.pf-m-success--pf-c-form-control--PaddingRight
2rem
.pf-c-form-control.pf-m-success--pf-c-form-control--BorderBottomColor
#3e8635
.pf-c-form-control.pf-m-warning--pf-c-form-control--PaddingRight
2rem
.pf-c-form-control.pf-m-warning--pf-c-form-control--BorderBottomColor
#f0ab00
.pf-c-form-control.pf-m-search--pf-c-form-control--PaddingLeft
2rem
select.pf-c-form-control--pf-c-form-control--PaddingRight
1.5rem
select.pf-c-form-control[aria-invalid="true"]--pf-c-form-control--PaddingRight
calc(0.5rem + 3rem)
select.pf-c-form-control[aria-invalid="true"]--pf-c-form-control--invalid--BackgroundPosition
calc(100% - 0.5rem - 1.5rem)
select.pf-c-form-control.pf-m-success--pf-c-form-control--PaddingRight
calc(0.5rem + 3rem)
select.pf-c-form-control.pf-m-success--pf-c-form-control--success--BackgroundPosition
calc(100% - 0.5rem - 1.5rem)
select.pf-c-form-control.pf-m-warning--pf-c-form-control--PaddingRight
calc(0.5rem + 3rem)

View source on Github