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