Form

A form is a group of elements used to collect information from a user. Related design guidelines: Forms

Examples Props CSS Variables

Examples

Basic

Horizontal

Invalid

Validated

Horizontal no padding top

Props

ActionGroup properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Anything that can be rendered as ActionGroup content.
className	string	No	''	Additional classes added to the ActionGroup.

Form properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Anything that can be rendered as Form content.
className	string	No	''	Additional classes added to the Form.
isHorizontal	boolean	No	false	Sets the Form to horizontal.

FormGroup properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Anything that can be rendered as FormGroup content.
className	string	No	''	Additional classes added to the FormGroup.
label	React.ReactNode	No		Label text before the field.
isRequired	boolean	No	false	Sets the FormGroup required.
validated	'success' \| 'error' \| 'default'	No	'default'	Sets the FormGroup validated. If you set to success, text color of helper text will be modified to indicate valid state. If set to error, text color of helper text will be modified to indicate error state.
isInline	boolean	No	false	Sets the FormGroup isInline.
hasNoPaddingTop	boolean	No	false	Removes top spacer from label.
helperText	React.ReactNode	No		Helper text after the field. It can be a simple text or an object.
helperTextInvalid	React.ReactNode	No		Helper text after the field when the field is invalid. It can be a simple text or an object.
fieldId	string	Yes		ID of the included field. It has to be the same for proper working.

FormHelperText properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the Helper Text Item
isError	boolean	No	false	Adds error styling to the Helper Text *
isHidden	boolean	No	true	Hides the helper text *
className	string	No	''	Additional classes added to the Helper Text Item

CSS Variables


	.pf-c-form	--pf-c-form--GridGap	1.5rem
--pf-c-form--GridGap --pf-global--gutter--md $pf-global--gutter--md $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-form	--pf-c-form__group--m-action--MarginTop	2rem
--pf-c-form__group--m-action--MarginTop --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-form	--pf-c-form--m-horizontal__group-label--md--GridColumnWidth	9.375rem
	.pf-c-form	--pf-c-form--m-horizontal__group-label--md--GridColumnGap	1rem
--pf-c-form--m-horizontal__group-label--md--GridColumnGap --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-form	--pf-c-form--m-horizontal__group-control--md--GridColumnWidth	1fr
	.pf-c-form	--pf-c-form--m-horizontal__group-label--md--PaddingTop	0.5rem
--pf-c-form--m-horizontal__group-label--md--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form	--pf-c-form__group-label--PaddingBottom	0.5rem
--pf-c-form__group-label--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form	--pf-c-form__label--FontSize	0.875rem
--pf-c-form__label--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-form	--pf-c-form__label--LineHeight	1.3
--pf-c-form__label--LineHeight --pf-global--LineHeight--sm $pf-global--LineHeight--sm 1.3
	.pf-c-form	--pf-c-form__label--m-disabled--Color	#6a6e73
--pf-c-form__label--m-disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-form	--pf-c-form__label-text--FontWeight	600
--pf-c-form__label-text--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 600
	.pf-c-form	--pf-c-form__label-required--MarginLeft	0.25rem
--pf-c-form__label-required--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-form	--pf-c-form__label-required--FontSize	0.875rem
--pf-c-form__label-required--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-form	--pf-c-form__label-required--Color	#c9190b
--pf-c-form__label-required--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-form	--pf-c-form__group-label-help--PaddingTop	0.25rem
--pf-c-form__group-label-help--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-form	--pf-c-form__group-label-help--PaddingRight	0.25rem
--pf-c-form__group-label-help--PaddingRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-form	--pf-c-form__group-label-help--PaddingBottom	0.25rem
--pf-c-form__group-label-help--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-form	--pf-c-form__group-label-help--PaddingLeft	0.25rem
--pf-c-form__group-label-help--PaddingLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-form	--pf-c-form__group-label-help--MarginTop	calc(0.25rem * -1)
--pf-c-form__group-label-help--MarginTop calc(--pf-c-form__group-label-help--PaddingTop * -1) calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-form	--pf-c-form__group-label-help--MarginRight	calc(0.25rem * -1)
--pf-c-form__group-label-help--MarginRight calc(--pf-c-form__group-label-help--PaddingRight * -1) calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-form	--pf-c-form__group-label-help--MarginBottom	calc(0.25rem * -1)
--pf-c-form__group-label-help--MarginBottom calc(--pf-c-form__group-label-help--PaddingBottom * -1) calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-form	--pf-c-form__group-label-help--MarginLeft	calc(0.25rem * -1 + 0.25rem)
--pf-c-form__group-label-help--MarginLeft calc(--pf-c-form__group-label-help--PaddingLeft * -1 + --pf-global--spacer--xs) calc(--pf-global--spacer--xs * -1 + $pf-global--spacer--xs) calc($pf-global--spacer--xs * -1 + $pf-global--spacer--xs) calc(pf-size-prem(4px) * -1 + pf-size-prem(4px)) calc(0.25rem * -1 + 0.25rem)
	.pf-c-form	--pf-c-form__group-label-help--FontSize	0.875rem
--pf-c-form__group-label-help--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-form	--pf-c-form__group-label-help--TranslateY	0.125rem
	.pf-c-form	--pf-c-form__group-control--m-inline--child--MarginRight	1.5rem
--pf-c-form__group-control--m-inline--child--MarginRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-form	--pf-c-form__actions--child--MarginTop	0.5rem
--pf-c-form__actions--child--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form	--pf-c-form__actions--child--MarginRight	0.5rem
--pf-c-form__actions--child--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form	--pf-c-form__actions--child--MarginBottom	0.5rem
--pf-c-form__actions--child--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form	--pf-c-form__actions--child--MarginLeft	0.5rem
--pf-c-form__actions--child--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-form	--pf-c-form__actions--MarginTop	calc(0.5rem * -1)
--pf-c-form__actions--MarginTop calc(--pf-c-form__actions--child--MarginTop * -1) calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-form	--pf-c-form__actions--MarginRight	calc(0.5rem * -1)
--pf-c-form__actions--MarginRight calc(--pf-c-form__actions--child--MarginRight * -1) calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-form	--pf-c-form__actions--MarginBottom	calc(0.5rem * -1)
--pf-c-form__actions--MarginBottom calc(--pf-c-form__actions--child--MarginBottom * -1) calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-form	--pf-c-form__actions--MarginLeft	calc(0.5rem * -1)
--pf-c-form__actions--MarginLeft calc(--pf-c-form__actions--child--MarginLeft * -1) calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-form	--pf-c-form__helper-text--MarginTop	0.25rem
--pf-c-form__helper-text--MarginTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-form	--pf-c-form__helper-text--FontSize	0.875rem
--pf-c-form__helper-text--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-form	--pf-c-form__helper-text--Color	#151515
--pf-c-form__helper-text--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-form	--pf-c-form__helper-text-icon--FontSize	1rem
--pf-c-form__helper-text-icon--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-form	--pf-c-form__helper-text-icon--MarginRight	0.25rem
--pf-c-form__helper-text-icon--MarginRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-form	--pf-c-form__helper-text--m-error--Color	#c9190b
--pf-c-form__helper-text--m-error--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-form	--pf-c-form__helper-text--m-success--Color	#0f280d
--pf-c-form__helper-text--m-success--Color --pf-global--success-color--200 $pf-global--success-color--200 $pf-color-green-700 #0f280d
	.pf-c-form.pf-m-horizontal	--pf-c-form__group-label--PaddingBottom	0
	.pf-c-form__helper-text.pf-m-error	--pf-c-form__helper-text--Color	#c9190b
--pf-c-form__helper-text--Color --pf-c-form__helper-text--m-error--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-form__helper-text.pf-m-success	--pf-c-form__helper-text--Color	#0f280d
--pf-c-form__helper-text--Color --pf-c-form__helper-text--m-success--Color --pf-global--success-color--200 $pf-global--success-color--200 $pf-color-green-700 #0f280d