Counter

Overview

Counter is a field that lets you increase or decrease its value incrementally, as well as directly input a value.

When to use:

  • Use Counters to input values that have a small range of likely values (e.g. 1-10).
  • Use Counters for values that are usually a number with some exceptions - e.g. number of copies.

Implementation

Counters are stylized numerical form controls with the ability to control validation.

Edit the code below to see your changes live!

function Example() {
  const [counterValue, setCounterValue] = useState(5);
  const handleChange = (value: number) => {
    setCounterValue(value);
  };

  return (
    <Form>
      <FormGroup>
        <Counter
          description="Description for the counter."
          label="Label"
          max={10}
          min={0}
          onCountChange={handleChange}
          value={counterValue}
        />
      </FormGroup>
    </Form>
  );
}

Props

Supports most native <input /> element attributes.

Prop name
Type
Default
Description
labelstring | FormControlLabel

Label element for Counters. Component will 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.

localization{ decreaseCount: string, increaseCount: string, optional: string }

Overrides the labels with localized text.

Props ending with * are required

Do's and Don'ts

Do
Counters should have a default value that represents the most likley choice the user will take.
Counters should always have a clear label as to what the number represents.
Include relevant signs (e.g. %, $) in the Counter to give context for the value’s type.
Don't
Avoid Counters if the value will likley change by large/unpredictable increments (e.g. price).