masked-input

MaskedInput is a component that helps format a user's input. It can be combined with Field to add formatted fields to a form.

Import

import { MaskedInput } from '@xpanseinc/nebula'

Usage

The component relies on Cleave.js and the specified options will be passed through.

<MaskedInput
  value="123456789"
  options={{
    blocks: [3, 2, 4],
    delimiter: '-',
  }}
/>

Programmatic Usage

<MaskedInput
  value="123456789"
  onChange={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
  onBlur={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
  options={{
    blocks: [3, 2, 4],
    delimiter: '-',
  }}
/>

Premade Inputs

We have a few premade inputs for commonly used fields.

Phone Number Field

For commonly formatted phone numbers using the "US" format. If you want to change to a different format you can pass phoneRegion as a property.

Phone Number

<PhoneField
  label="Phone Number"
  name="phoneNumber"
  value="18008675309"
  onChange={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
  onBlur={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
/>

Zip Code Field

For US zip codes, this has a max character limit of 5.

Zip Code

<ZipCodeField
  label="Zip Code"
  name="zipCode"
  value="12345"
  onChange={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
  onBlur={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
/>

Social Security Field

SSN

<SocialSecurityField
  label="SSN"
  name="ssn"
  onChange={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
  onBlur={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
/>

Date Field

DOB

<DateField
  label="DOB"
  name="dob"
  value="09/07/1980"
  onChange={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
  onBlur={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
/>

Currency Field

Maximum Down Payment

<CurrencyField
  label="Maximum Down Payment"
  name="maximumDownPayment"
  value="100000"
  onChange={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
  onBlur={event => {
    console.log(event.target.value, event.target.rawValue)
  }}
/>