CVV

The cvv preset is designed for credit card security codes. It typically limits the input to 3 digits.

import { useViraMask } from '@virastack/input-mask';
import { useForm } from 'react-hook-form';
 
const form = useForm();
const { cvv } = useViraMask({
  form,
  schema: { cvv: 'cvv' },
});
 
<input {...cvv} />

Automatic Length Switching

ViraStack Mask can automatically switch the CVV mask to 4 digits if an American Express card number is entered in another field.

For this to work:

1. You must have a field with the card preset in your schema.
2. The card field must be identified as a card field (either by using the string shorthand 'card' or the object config { preset: 'card' }).

const { cardNumber, cvv } = useViraMask({
  form,
  schema: {
    cardNumber: 'card', // Must be present for auto-switch
    cvv: 'cvv',
  },
});

Customize

If you need a 4-digit CVV (e.g. for American Express) and you are using the CVV field independently (without a card number field), you can customize the mask.

import { useViraMask } from '@virastack/input-mask';
import { useForm } from 'react-hook-form';
 
const form = useForm();
const { cvv } = useViraMask({
  form,
  schema: {
    cvv: {
      preset: 'cvv',
      mask: '9999',
    },
  },
});
 
<input {...cvv} />