Helper text

Helper text is a text-based support method that adds additional context to field inputs.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-helper-text	--pf-v6-c-helper-text--Gap	0.25rem
--pf-v6-c-helper-text--Gap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-helper-text	--pf-v6-c-helper-text--FontSize	0.75rem
--pf-v6-c-helper-text--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-helper-text__item-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-text--Color	(In light theme) #151515
--pf-v6-c-helper-text__item-text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-text--FontWeight	400
--pf-v6-c-helper-text__item-text--FontWeight --pf-t--global--font--weight--body--default --pf-t--global--font--weight--100 400
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-icon--m-indeterminate--Color	(In light theme) #707070
--pf-v6-c-helper-text__item-icon--m-indeterminate--Color --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-text--m-indeterminate--Color	(In light theme) #4d4d4d
--pf-v6-c-helper-text__item-text--m-indeterminate--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-icon--m-warning--Color	(In light theme) #dca614
--pf-v6-c-helper-text__item-icon--m-warning--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-text--m-warning--FontWeight	600
--pf-v6-c-helper-text__item-text--m-warning--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-icon--m-success--Color	(In light theme) #3d7317
--pf-v6-c-helper-text__item-icon--m-success--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-text--m-success--FontWeight	600
--pf-v6-c-helper-text__item-text--m-success--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-icon--m-error--Color	(In light theme) #b1380b
--pf-v6-c-helper-text__item-icon--m-error--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-text--m-error--FontWeight	600
--pf-v6-c-helper-text__item-text--m-error--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity	200ms
--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-helper-text	--pf-v6-c-helper-text--m-dynamic__item-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-helper-text--m-dynamic__item-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-helper-text	--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color	(In light theme) #707070
--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-helper-text	--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color	(In light theme) #4d4d4d
--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-helper-text	--pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color	(In light theme) #dca614
--pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-helper-text	--pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight	600
--pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-helper-text	--pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color	(In light theme) #3d7317
--pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-helper-text	--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color	(In light theme) #b1380b
--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-helper-text	--pf-v6-c-helper-text__item-icon--MarginInlineEnd	0.25rem
--pf-v6-c-helper-text__item-icon--MarginInlineEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-helper-text__item.pf-m-indeterminate	--pf-v6-c-helper-text__item-icon--Color	(In light theme) #707070
--pf-v6-c-helper-text__item-icon--Color --pf-v6-c-helper-text__item-icon--m-indeterminate--Color --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-helper-text__item.pf-m-indeterminate	--pf-v6-c-helper-text__item-text--Color	(In light theme) #4d4d4d
--pf-v6-c-helper-text__item-text--Color --pf-v6-c-helper-text__item-text--m-indeterminate--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-helper-text__item.pf-m-indeterminate	--pf-v6-c-helper-text--m-dynamic__item-icon--Color	(In light theme) #707070
--pf-v6-c-helper-text--m-dynamic__item-icon--Color --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-helper-text__item.pf-m-indeterminate	--pf-v6-c-helper-text--m-dynamic__item-text--Color	(In light theme) #4d4d4d
--pf-v6-c-helper-text--m-dynamic__item-text--Color --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-helper-text__item.pf-m-warning	--pf-v6-c-helper-text__item-text--FontWeight	600
--pf-v6-c-helper-text__item-text--FontWeight --pf-v6-c-helper-text__item-text--m-warning--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-helper-text__item.pf-m-warning	--pf-v6-c-helper-text__item-icon--Color	(In light theme) #dca614
--pf-v6-c-helper-text__item-icon--Color --pf-v6-c-helper-text__item-icon--m-warning--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-helper-text__item.pf-m-warning	--pf-v6-c-helper-text--m-dynamic__item-icon--Color	(In light theme) #dca614
--pf-v6-c-helper-text--m-dynamic__item-icon--Color --pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-helper-text__item.pf-m-success	--pf-v6-c-helper-text__item-text--FontWeight	600
--pf-v6-c-helper-text__item-text--FontWeight --pf-v6-c-helper-text__item-text--m-success--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-helper-text__item.pf-m-success	--pf-v6-c-helper-text__item-icon--Color	(In light theme) #3d7317
--pf-v6-c-helper-text__item-icon--Color --pf-v6-c-helper-text__item-icon--m-success--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-helper-text__item.pf-m-success	--pf-v6-c-helper-text--m-dynamic__item-icon--Color	(In light theme) #3d7317
--pf-v6-c-helper-text--m-dynamic__item-icon--Color --pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-helper-text__item.pf-m-error	--pf-v6-c-helper-text__item-text--FontWeight	600
--pf-v6-c-helper-text__item-text--FontWeight --pf-v6-c-helper-text__item-text--m-error--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-helper-text__item.pf-m-error	--pf-v6-c-helper-text__item-icon--Color	(In light theme) #b1380b
--pf-v6-c-helper-text__item-icon--Color --pf-v6-c-helper-text__item-icon--m-error--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-helper-text__item.pf-m-error	--pf-v6-c-helper-text--m-dynamic__item-icon--Color	(In light theme) #b1380b
--pf-v6-c-helper-text--m-dynamic__item-icon--Color --pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-helper-text__item.pf-m-dynamic	--pf-v6-c-helper-text__item-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-helper-text__item-icon--Color --pf-v6-c-helper-text--m-dynamic__item-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f