CVV

3-digit security code. Expands to 4 digits for Amex when a card field exists in the same schema.

← All examples·cvv

Preview

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
function Example() {
  const form = useForm<{ cvv: string }>()
  const { cvv } = useViraMask({
    form,
    schema: { cvv: "cvv" },
  })
 
  const { rawValue, ...inputProps } = cvv
 
  return <input {...inputProps} placeholder="123" />
}

Details

Mask: 999
Preset: "cvv"
resolveMask picks CVV_3 / CVV_4 based on the card field in the schema.
Defaults to 3 digits when there is no card field.
See the Credit card form example for integrated usage.

Customization

With card field

CVV length is tied to card type.

schema: { card: "card", cvv: "cvv" }

See useViraMask() for the hook API and custom mask for custom masks.