Skip to main content

Masked input

Masked input in Storybook
note

There are deprecated versions of this component. Switch to a version of the docs older than 10.3.x to view their docs.

Examples​

Basic masked input​

import React from 'react';
import { MaskInput } from '@jutro/components/new';

export const BasicMaskinput = () => {
  return (
    <MaskInput
      label="Mask input component"
      mask="(999) 999-9999"
      secondaryLabel="This is a secondary label"
      initialValue="(123) 942-4237"
    />
  );
};
note

If the initialValueis set and does not match the mask, this value is discarded

Formatchars in masked input​

You can create a custom mapping of formatting characters and the corresponding regular expressions the input must satisfy. In this example, the mask DDD represents any letter from a to z in upper case and 0000 represents any number from 0 to 5.

import React, { useState } from 'react';
import { MaskInput } from '@jutro/components/new';
import { TextInput } from '@jutro/components';

export const FormatCharsMaskInput = () => {
  const [value, setValue] = useState('');

  // Define the mask format and placeholder characters
  const formatChars = {
    D: '[A-Z]',
    0: '[0-5]',
  };

  return (
    <div>
      <MaskInput
        label="Enter 3 letters in upper case"
        mask="DDD-0000"
        formatChars={formatChars}
      />
    </div>
  );
};

Controlled masked input​

You can use the value property for the controlled component scenario:

import React, { useState } from 'react';
import { MaskInput } from '@jutro/components/new';
import { TextInput } from '@jutro/components';

export const ControlledMaskInput = () => {
  const [enteredValue, setEnteredValue] = useState('');

  const onChangefunc = (event) => {
    const newValue = event.target.value;
    setEnteredValue(newValue);
    console.log('Entered value:', newValue);
  };

  return (
    <div>
      <MaskInput
        label="Enter a number to be assigned to the following field"
        mask="(999) 999-9999"
        onChange={onChangefunc}
        stateMessages={{}}
        required
      />
      <TextInput
        label="The value is updated when the first field is modified"
        value={enteredValue}
      />
    </div>
  );
};

Validation​

You can validate the input when the field is modified or when it loses focus using the onChange and onBlur properties, respectively. Additionally, in this example, the required property sets the field as required.

import React, { useState } from 'react';
import { MaskInput } from '@jutro/components/new';
import { TextInput } from '@jutro/components';

export const ValidationMaskInput = () => {
  const [enteredValue, setEnteredValue] = useState('');

  const onBlurfunc = (event) => {
    const newValue = event.target.value;
    setEnteredValue(newValue);
  };

  return (
    <div>
      <MaskInput
        label="Validation onBlur example"
        mask="(999) 999-9999"
        onBlur={onBlurfunc}
        stateMessages={{}}
        required
      />
      <TextInput
        label="The value is updated when the first field loses its focus"
        value={enteredValue}
      />
    </div>
  );
};

Error message​

Allows to set a custom error message.

import React from 'react';
import { MaskInput } from '@jutro/components/new';

export const ErrorMaskInput = () => {
  return (
    <MaskInput
      label="Error field"
      mask="(999) 999-9999"
      stateMessages={{
        error: ['This is a custom error message'],
      }}
    />
  );
};
Legal and Support Information
Copyright © 2001-2024 Guidewire Software, Inc.