Input Mask

To provide an easy way to increase input field readability by formatting your typed data.

Examples

Input Mask

Code

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

const form = ref({
  date: '',
  number: 0,
  creditCard: ''
})
</script>

<template>
  <form @submit.prevent="">
    <base-input-mask
      v-model="form.number"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Numeral"
      placeholder="1,234,567"
    />
    <base-input-mask
      v-model="form.date"
      :options="{ date: true, delimiter: '-', datePattern: ['d', 'm', 'Y'] }"
      label="Date"
      placeholder="DD-MM-YYYY"
    />
    <base-input-mask
      v-model="form.creditCard"
      :options="{ creditCard: true }"
      label="Credit Card"
      placeholder="**** **** **** ****"
    />
  </form>
</template>

Helper

Code

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

const form = ref({
  number1: null,
  number2: null,
  number3: null,
  number4: null,
  number5: 10000
})

const errors = ref(['Error example'])
</script>

<template>
  <form @submit.prevent="">
    <base-input-mask
      v-model="form.number1"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      required
    />
    <base-input-mask
      v-model="form.number2"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      description="Description example"
    />
    <base-input-mask
      v-model="form.number2"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      placeholder="1,234,567"
      description="Placeholder"
    />
    <base-input-mask
      v-model="form.number3"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      :helpers="['Helper example']"
    />
    <base-input-mask
      v-model="form.number4"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      v-model:errors="errors"
    />
    <base-input-mask
      v-model="form.number5"
      :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
      label="Label"
      description="Disabled"
      disabled
    />
  </form>
</template>

Input Mask API

Types

export type BaseInputMaskBorderType = 'none' | 'simple' | 'full'
export type BaseFormLayoutType = `horizontal` `vertical`

Props

Name	Type	Default	Description
v-model	string		v-model is required.
v-model:errors	string[]		Input error message.
id	string		Input id.
label	string		Input label.
description	string		Input description.
placeholder	string		Input placeholder.
border	BaseInputMaskBorderType	full	Input border.
layout	BaseFormLayoutType	horizontal	Input layout.
autofocus	boolean	false	Focus input on page load.
required	boolean	false	if true input mask is required.
disabled	boolean	false	if true input mask is disabled.
helpers	string[]		Input helper message.
options	object		Cleave options
data-testid	string		Testing ID.

Automated Test Guide

If you pass a data-testid to the <base-input-mask> component, it will automatically generate unique data-testid attributes for testing.

Gherkin Scenario

When I type "4242556677889900" into "credit-card"

Step Definition

When('I type {string} into {string}', (value: string, selector: string) => {
  cy.get(`[data-testid="${selector}"]`).type(value)
})

Code Implementation

<script setup>
import { ref } from 'vue'

const creditCard = ref()
</script>

<template>
  <base-input-mask
    v-model="creditCard"
    :options="{ creditCard: true }"
    placeholder="**** **** **** ****"
    data-testid="credit-card"
  />
</template>