Number input

A number input provides a quick and effective way for users to enter and modify a numeric value. Similar to input groups, number inputs combine 2 input types into 1 control: A text input field with buttons on either side. When combined, these elements allow users to input numeric values in a responsive and scalable way.

Examples

Default

With unit

With unit and lower threshold reached

With unit and upper threshold reached

Disabled

With status

Varying sizes

Documentation

Accessibility

Attribute	Applied to	Outcome
`aria-label="Plus"`, `aria-label="Minus"`	`.pf-c-button.pf-m-control`	Provides an accessible name for the outer plus/minus buttons. Required
`min`	`input[type="number"].pf-c-form-control`	Provides an optional minimum value for the input.
`max`	`input[type="number"].pf-c-form-control`	Provides an optional maximum value for the input.

Usage

Class	Applied to	Outcome
`.pf-c-number-input`	`<div>`	Initiates the number input component.
`.pf-c-number-input__icon`	`<span>`	Initiates the number input icon.
`.pf-c-number-input__unit`	`<span>`	Initiates the number input unit.
`.pf-m-status`	`.pf-c-number-input`	Modifies the width to create enough space for a status icon to be included in the form control portion of the number input. Required if a status icon may be shown, even if the icon is not currently shown.
`--pf-c-number-input--c-form-control--width-chars`	`.pf-c-number-input`	Specifies the number of characters to show in the input.

CSS variables


	.pf-c-number-input	--pf-c-number-input__unit--c-input-group--MarginLeft	0.5rem
--pf-c-number-input__unit--c-input-group--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-number-input	--pf-c-number-input__icon--FontSize	0.75rem
--pf-c-number-input__icon--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-number-input	--pf-c-number-input--c-form-control--width-base	calc(0.5rem * 2 + 1px * 2)
--pf-c-number-input--c-form-control--width-base calc(--pf-global--spacer--sm * 2 + --pf-global--BorderWidth--sm * 2) calc($pf-global--spacer--sm * 2 + $pf-global--BorderWidth--sm * 2) calc(pf-size-prem(8px) * 2 + 1px * 2) calc(0.5rem * 2 + 1px * 2)
	.pf-c-number-input	--pf-c-number-input--c-form-control--width-icon	0px
	.pf-c-number-input	--pf-c-number-input--m-status--c-form-control--width-icon	2rem
--pf-c-number-input--m-status--c-form-control--width-icon --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-number-input	--pf-c-number-input--c-form-control--width-chars	4
	.pf-c-number-input	--pf-c-number-input--c-form-control--Width	calc( calc( calc(0.5rem * 2 + 1px * 2) + 4 * 1ch ) + 0px )
--pf-c-number-input--c-form-control--Width calc( calc( --pf-c-number-input--c-form-control--width-base + --pf-c-number-input--c-form-control--width-chars * 1ch ) + --pf-c-number-input--c-form-control--width-icon ) calc( calc( calc(--pf-global--spacer--sm * 2 + --pf-global--BorderWidth--sm * 2) + 4 * 1ch ) + 0px ) calc( calc( calc($pf-global--spacer--sm * 2 + $pf-global--BorderWidth--sm * 2) + 4 * 1ch ) + 0px ) calc( calc( calc(pf-size-prem(8px) * 2 + 1px * 2) + 4 * 1ch ) + 0px ) calc( calc( calc(0.5rem * 2 + 1px * 2) + 4 * 1ch ) + 0px )
	.pf-c-number-input.pf-m-status	--pf-c-number-input--c-form-control--width-icon	2rem
--pf-c-number-input--c-form-control--width-icon --pf-c-number-input--m-status--c-form-control--width-icon --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines