Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Mask A preset name, or a pattern of your own.

Placeholder

Post Raw Post the unmasked value under the field name.

import { createMaskedInput } from '@devix-labs/masked-input';
import '@devix-labs/masked-input/styles.css';

createMaskedInput(document.querySelector('#target'), {
  value: '4210112345671',
  mask: 'cnic',
  placeholder: '',
  postRaw: true
});

import { MaskedInput } from '@devix-labs/masked-input/react';
import '@devix-labs/masked-input/styles.css';

<MaskedInput
  value="4210112345671"
  mask="cnic"
  placeholder=""
  postRaw
/>

<script setup>
import { MaskedInput } from '@devix-labs/masked-input/vue';
import '@devix-labs/masked-input/styles.css';
</script>

<template>
  <MaskedInput
  value="4210112345671"
  mask="cnic"
  placeholder=""
  post-raw
/>
</template>

<script>
  import { maskedInput } from '@devix-labs/masked-input/svelte';
  import '@devix-labs/masked-input/styles.css';
</script>

<div use:maskedInput={{
  value: '4210112345671',
  mask: 'cnic',
  placeholder: '',
  postRaw: true
}} />

Every option here is in the documentation, along with the ones that are not worth a control.