Number input

A number input combines a text input field with buttons to provide users with a quick and effective way to enter and modify a numeric value.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-number-input	--pf-v6-c-number-input__unit--c-input-group--MarginInlineStart	0.5rem
--pf-v6-c-number-input__unit--c-input-group--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-number-input	--pf-v6-c-number-input__icon--FontSize	0.75rem
--pf-v6-c-number-input__icon--FontSize --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-number-input	--pf-v6-c-number-input--c-form-control--width-base	calc(1rem * 2 + 1px * 2)
--pf-v6-c-number-input--c-form-control--width-base calc(--pf-t--global--spacer--md * 2 + --pf-t--global--border--width--box--default * 2) calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--border--width--100 * 2) calc(1rem * 2 + 1px * 2)
	.pf-v6-c-number-input	--pf-v6-c-number-input--c-form-control--width-icon	2rem
--pf-v6-c-number-input--c-form-control--width-icon --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-number-input	--pf-v6-c-number-input--c-form-control--width-chars	4
	.pf-v6-c-number-input	--pf-v6-c-number-input--c-form-control--Width	calc( calc( calc(1rem * 2 + 1px * 2) + 4 * 1ch ) + 2rem )
--pf-v6-c-number-input--c-form-control--Width calc( calc( --pf-v6-c-number-input--c-form-control--width-base + --pf-v6-c-number-input--c-form-control--width-chars * 1ch ) + --pf-v6-c-number-input--c-form-control--width-icon ) calc( calc( calc(--pf-t--global--spacer--md * 2 + --pf-t--global--border--width--box--default * 2) + 4 * 1ch ) + --pf-t--global--spacer--xl ) calc( calc( calc(--pf-t--global--spacer--300 * 2 + --pf-t--global--border--width--100 * 2) + 4 * 1ch ) + --pf-t--global--spacer--500 ) calc( calc( calc(1rem * 2 + 1px * 2) + 4 * 1ch ) + 2rem )