Skip to main content

TextInputWithMask

Inputs & Controls

TextInputWithMask

TextInput wrapper that enforces custom formatting masks.

Usage

Collect phone numbers, IDs, or other structured strings.

Highlights

  • Pluggable mask definitions
  • Syncs masked + raw values via callbacks

When to use it

  • Validation must happen as the user types.
  • Data requires constant-length formatting.

Related components

TextInputuseHandleNumberFormat

Examples​

With Number Mask​

Preview (Web)
import { useState } from 'react';
import { TextInputWithMask } from 'react-native-molecules/components/TextInputWithMask';

export default function Example() {
  const [value, setValue] = useState('');

  return (
      <TextInputWithMask
          label="Phone Number"
          placeholder="555-123-9876"
          mask="___-___-____"
          keyboardType="number-pad"
          value={value}
          onChangeText={setValue}
      />
  );
}

With Currency Mask​

Preview (Web)
import { useState } from 'react';
import { TextInputWithMask } from 'react-native-molecules/components/TextInputWithMask';

export default function Example() {
  const [value, setValue] = useState('');

  return (
      <TextInputWithMask
          label="Credit Card"
          placeholder="4242 4242 4242 4242"
          mask="____ ____ ____ ____"
          keyboardType="number-pad"
          value={value}
          onChangeText={setValue}
      />
  );
}