Input group

Use an input group when you want to group multiple input types, e.g., a text input and a button, into one control. Related design guidelines: Data input

Examples Documentation CSS Variables

Examples

Inputgroup

.00

@example.com

Documentation

Overview

Use the input group to extend form controls by adding text, buttons, selects, etc.

Accessibility

When using the .pf-c-input-group always ensure labels are used outside the input group with the .pf-screen-reader class applied. You can also make use of the aria-describedby, aria-label, or aria-labelledby attributues. For more information on accessibility and forms see the form component. | Attribute | Applied to | Outcome | | -- | -- | -- | | aria-describedby | .pf-c-form-control | When using .pf-c-input-group__text or .pf-c-input-group__action make use of this on the input field. |

Usage

Class	Applied to	Outcome
`.pf-c-input-group`	`<div>`	Initiates the input group. Required
`.pf-c-input-group__text`	`<span>`	Initiates the input group text. This can be used to show text, radio, icons, or check boxes.

CSS Variables


	.pf-c-input-group	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-input-group	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-input-group	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-input-group	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-input-group	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-input-group	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-input-group	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-input-group	--pf-c-input-group--BackgroundColor	#fff
--pf-c-input-group--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-input-group	--pf-c-input-group__text--FontSize	1rem
--pf-c-input-group__text--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-input-group	--pf-c-input-group__text--PaddingRight	0.5rem
--pf-c-input-group__text--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-input-group	--pf-c-input-group__text--PaddingLeft	0.5rem
--pf-c-input-group__text--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-input-group	--pf-c-input-group__text--Color	#6a6e73
--pf-c-input-group__text--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-input-group	--pf-c-input-group__text--BorderWidth	1px
--pf-c-input-group__text--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-input-group	--pf-c-input-group__text--BorderTopColor	#f0f0f0
--pf-c-input-group__text--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-input-group	--pf-c-input-group__text--BorderRightColor	#f0f0f0
--pf-c-input-group__text--BorderRightColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-input-group	--pf-c-input-group__text--BorderBottomColor	#8a8d90
--pf-c-input-group__text--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-input-group	--pf-c-input-group__text--BorderLeftColor	#f0f0f0
--pf-c-input-group__text--BorderLeftColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-input-group	--pf-c-input-group__text--BackgroundColor	#fff
--pf-c-input-group__text--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-input-group	--pf-c-input-group__textarea--MinHeight	2rem
--pf-c-input-group__textarea--MinHeight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-input-group	--pf-c-input-group--c-form-control--invalid--ZIndex	100
--pf-c-input-group--c-form-control--invalid--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-input-group	--pf-c-input-group--c-form-control--MarginRight	1px