Counter

A number field is an input field that users can type into and have an extra button plus and minus icon for Increment and decrement.

Usage

Code Editor
Copy
import { Counter } from '@erudilabs/alma'

Component

Here preview and detail explain of Counter component


Default

Code Editor
Copy
<Counter
  name="level"
  label="Level"
  placeholder="Enter your current level"
/>

Disabled

Code Editor
Copy
<Counter
  name="level-disabled"
  label="Level"
  placeholder="Enter your current level"
  disabled
/>

Helper

This field is using a helper text

Code Editor
Copy
<Counter
  name="level-helper"
  label="Level"
  placeholder="Enter your current level"
  helper="This field is using a helper text"
/>

Error

An unexpected error occurred. Please try again later

Code Editor
Copy
<Counter
  name="level-error"
  label="Level"
  placeholder="Enter your current level"
  errorMessage="An unexpected error occurred. Please try again later"
/>

Min number

Code Editor
Copy
<Counter
  name="level-min"
  label="Level"
  placeholder="Enter your current level"
  min={4}
/>

Max number

Code Editor
Copy
<Counter
  name="level-min"
  label="Level"
  placeholder="Enter your current level"
  max={5}
/>

Props Reference

Prop
Type

testId?

string

className?

string

label?

string

name

string

helper?

ReactNode

min?

number

max?

number

placeholder?

string

errorMessage?

string

defaultValue?

string

disabled?

boolean

onChange?

(e: ChangeEvent) => void

onBlur?

(e: FocusEvent) => void