Number input

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Default

With unit

%

$

With unit and lower threshold reached

%

With unit and upper threshold reached

%

Disabled

%

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	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-c-number-input--c-form-control--width-chars`	`.pf-c-number-input`	Specifies the number of characters to show in the input.

CSS variables

View source on Github