Number Input

A number field is an input field that users can type into. It has a range of options and supports several number.

Usage

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

Component

Here preview and detail explain of Number Input component


Default

Code Editor
Copy
<NumberInput
  name="postal_code"
  label="Postal code"
  placeholder="Enter your postal code"
/>

Disabled

Code Editor
Copy
<NumberInput
  name="postal_code_disabled"
  label="Postal code"
  placeholder="Enter your postal code"
  disabled
/>

Helper

This field is using a helper text

Code Editor
Copy
<NumberInput
  name="postal_code_helper"
  label="Postal code"
  placeholder="Enter your postal code"
  helper="This field is using a helper text"
/>

Error

An unexpected error occurred. Please try again later

Code Editor
Copy
<NumberInput
  name="postal_code_error"
  label="Postal code"
  placeholder="Enter your postal code"
  errorMessage="An unexpected error occurred. Please try again later"
/>

Prefix

Code Editor
Copy
<NumberInput
  name="prefix_number_input"
  label="With prefix"
  placeholder="Example text input with prefix icon"
  prefix={<DocumentText className="text-gray-600 dark:test-gray-500" />}
/>

Suffix

Code Editor
Copy
<NumberInput
  name="suffix_number_input"
  label="With suffix"
  placeholder="Example number input with suffix icon"
  suffix={<Briefcase className="text-gray-600 dark:test-gray-500" />}
/>

Max length

Code Editor
Copy
<NumberInput
  name="max_number_input"
  label="Postal code"
  placeholder="Enter your postal code"
  max={4}
/>

Props Reference

Prop
Type

testId?

string

className?

string

label?

string

max?

number

name

string

helper?

ReactNode

prefix?

ReactNode

suffix?

ReactNode

placeholder?

string

errorMessage?

string

defaultValue?

string

disabled?

boolean

onChange?

(e: ChangeEvent) => void

onBlur?

(e: FocusEvent) => void