Full name

Accepts letters of any language and single spaces; digits and symbols can't be typed. It starts with a letter and holds 70 characters at most.

← All examples·fullName

Preview

Form value: -

Display: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
function Example() {
  const form = useForm<{ fullName: string }>()
  const { fullName } = useViraMask(form, { fullName: "fullName" })
 
  return <input {...fullName} placeholder="Ömer Gülçiçek" />
}

Details

Pattern: a[n…]
Preset: "fullName"
Form value: "Ömer Gülçiçek"
The mask doesn't check for a required value or remove a trailing space; validate both in your schema with z.string().trim().min(1).
Apostrophes and hyphens aren't accepted by default: for Jean-Luc and O'Neil, derive a new preset as shown below.

Customization

Name on a card

Add card name autofill on top of the preset. If you want capitals, add transform: "uppercase"; it isn't locale-aware, so a Turkish i becomes I, not İ.

Form value: -

Display: -

useViraMask(form, {
  cardName: { preset: "fullName", autoComplete: "cc-name" },
})

Allowing apostrophes and hyphens

tokens can't be overridden on a preset. Spread its options into definePreset and widen the n token.

import { definePreset, presets } from "@virastack/mask"
 
const intlName = definePreset("intlName", {
  ...presets.fullName.options,
  tokens: { n: /[\p{L}\p{M} '-]/u },
})

For the hook API see useViraMask(); for your own pattern see custom mask.

Full name

Accepts letters of any language and single spaces; digits and symbols can't be typed. It starts with a letter and holds 70 characters at most.

← All examples·fullName

Preview

Form value: -

Display: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
function Example() {
  const form = useForm<{ fullName: string }>()
  const { fullName } = useViraMask(form, { fullName: "fullName" })
 
  return <input {...fullName} placeholder="Ömer Gülçiçek" />
}

Details

Pattern: a[n…]
Preset: "fullName"
Form value: "Ömer Gülçiçek"
The mask doesn't check for a required value or remove a trailing space; validate both in your schema with z.string().trim().min(1).
Apostrophes and hyphens aren't accepted by default: for Jean-Luc and O'Neil, derive a new preset as shown below.

Customization

Name on a card

Add card name autofill on top of the preset. If you want capitals, add transform: "uppercase"; it isn't locale-aware, so a Turkish i becomes I, not İ.

Form value: -

Display: -

useViraMask(form, {
  cardName: { preset: "fullName", autoComplete: "cc-name" },
})

Allowing apostrophes and hyphens

tokens can't be overridden on a preset. Spread its options into definePreset and widen the n token.

import { definePreset, presets } from "@virastack/mask"
 
const intlName = definePreset("intlName", {
  ...presets.fullName.options,
  tokens: { n: /[\p{L}\p{M} '-]/u },
})

For the hook API see useViraMask(); for your own pattern see custom mask.