Mobile Input

Mobile Input field is an input field only use for mobile number with specific country code format.

Usage

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

Types

Code Editor
Copy
import type { CountryCodeProps } from '@erudilabs/alma'
CountryCodeProps= '62' | '63'

Component

Here preview and detail explain of Mobile Input component


Default

+62
Code Editor
Copy
<MobileInput
  name="mobile-number-id"
  label="Mobile Number"
  countryCode="62"
  placeholder="Enter your mobile number"
/>

+63
Code Editor
Copy
<MobileInput
  name="mobile-number-ph"
  label="Mobile Number"
  countryCode="63"
  placeholder="Enter your mobile number"
/>

Disabled

+62
Code Editor
Copy
<MobileInput
  name="mobile-number-disabled"
  label="Mobile Number"
  countryCode="62"
  placeholder="Enter your mobile number"
  disabled
/>

Helper

+63

This field is using a helper text

Code Editor
Copy
<MobileInput
  name="mobile-number-helper"
  label="Mobile Number"
  countryCode="63"
  placeholder="Enter your mobile number"
  helper="This field is using a helper text"
/>

Error

+62

An unexpected error occurred. Please try again later

Code Editor
Copy
<MobileInput
  name="mobile-number-error"
  label="Mobile Number"
  countryCode="62"
  placeholder="Enter your mobile number"
  errorMessage="An unexpected error occurred. Please try again later"
/>

Props Reference

Prop
Type

testId?

string

className?

string

label?

string

name

string

countryCode

CountryCodeProps

helper?

ReactNode

placeholder?

string

errorMessage?

string

defaultValue?

string

disabled?

boolean

onChange?

(e: ChangeEvent) => void

onBlur?

(e: FocusEvent) => void