Counter

Counters are stylized numerical form controls with the ability to control validation. Text Field Design Guidelines.

Description for the counter.

Edit the code below to see your changes live!

API

Supports most native <input /> element attributes.

Counter

Prop Name
Type
Default
Description
labelstring | FormControlLabel

Label element for counters. Component with auto generate id's for the accessibility API.

labelIdstring

Appends an id to the generated label element.

descriptionstring | FormControlDescription

Append a description to the input field.

errorstring | string[] | FormControlError | FormControlError[]

Displays an error message for the field. Error message will be passed to the FormGroup for display purposes.

value *number

Value for the Counter. Only accepts whole numbers.

minnumber0

The minimum value allowed.

maxnumber100

The maximum value allowed.

stepnumber1

The amount beetween one value and the next when incrementing or decrementing the Counter.

onCountChange *(count: number) => void

Function to be called that changes counter value. Receives the new count from the component.

Props ending with * are required

Error State

Counters allow you to pass in an error message that will control the styles of a counter. The logic on the counter can be controlled with the onCountChange prop.

Select at least one item.

Number of items must be at least 1.

Edit the code below to see your changes live!

Beta