Input Mask

CInputMask is used to enter input in a certain format such as phone numbers, dates, and more.

Basic Usage

CInputMask is used with the v-model property for two-way value binding. The mask property defines the format.

<template>
  <CInputMask
      v-model="value"
      mask="99-999999"
      placeholder="99-999999"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
</script>

Mask

The following mask definitions are supported:

• a - Alpha character (A-Z, a-z)
• 9 - Numeric character (0-9)
• * - Alpha numberic character (A-Z, a-z, 0-9)

SSN

Phone

Serial Number

<template>
  <CInputMask v-model="ssn" mask="999-99-9999" placeholder="999-99-9999" />
  <CInputMask v-model="phone" mask="(999) 999-9999" placeholder="(999) 999-9999" />
  <CInputMask v-model="serial" mask="a*-999-a999" placeholder="a*-999-a999" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const ssn = ref(null);
const phone = ref(null);
const serial = ref(null);
</script>

Slot Character

The default placeholder for a mask is underscore. Use slotChar to customize it.

<template>
  <CInputMask
      v-model="value"
      mask="99/99/9999"
      slotChar="mm/dd/yyyy"
      placeholder="99/99/9999"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
</script>

Optional

When the input does not complete the mask definition, it is cleared by default. Use autoClear to control this behavior. In addition, ? is used to mark anything after it within the mask as optional.

<template>
  <CInputMask
      v-model="value"
      mask="(999) 999-9999? x99999"
      placeholder="(999) 999-9999? x99999"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
</script>

Sizes

CInputMask provides small and large sizes as alternatives to the base.

<template>
    <div class="card flex flex-col items-center gap-4">
        <CInputMask
            v-model="value1"
            mask="99-999999"
            size="small"
            placeholder="Small"
        />
        <CInputMask
            v-model="value2"
            mask="99-999999"
            placeholder="Normal"
        />
        <CInputMask
            v-model="value3"
            mask="99-999999"
            size="large"
            placeholder="Large"
        />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
</script>

Invalid

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

<template>
  <CInputMask
      v-model="value"
      :invalid="!value"
      mask="999-99-9999"
      placeholder="SSN"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
</script>

Disabled

When disabled is present, the element cannot be edited and focused.

<template>
  <CInputMask
      v-model="value"
      disabled
      mask="99-999999"
      placeholder="Disabled"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref(null);
</script>