Phone

Default NANP-style phone: (999) 999-9999.

← All examples·phone

Preview

rawValue: -

value: -

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

Details

Mask: (999) 999-9999
Preset: "phone"
Defaults to a common international grouping. No built-in format validator; only the mask is applied.

Customization

Turkey phone customization

Override the mask for TR grouping with spaces.

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
const form = useForm({ defaultValues: { phone: "" } })
 
const { phone } = useViraMask({
  form,
  schema: {
    phone: {
      preset: "phone",
      mask: "(999) 999 99 99",
    },
  },
})
 
const { rawValue, ...inputProps } = phone
 
<input {...inputProps} placeholder="(555) 555 55 55" />

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

Phone

Default NANP-style phone: (999) 999-9999.

← All examples·phone

Preview

rawValue: -

value: -

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

Details

Mask: (999) 999-9999
Preset: "phone"
Defaults to a common international grouping. No built-in format validator; only the mask is applied.

Customization

Turkey phone customization

Override the mask for TR grouping with spaces.

rawValue: -

value: -

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
const form = useForm({ defaultValues: { phone: "" } })
 
const { phone } = useViraMask({
  form,
  schema: {
    phone: {
      preset: "phone",
      mask: "(999) 999 99 99",
    },
  },
})
 
const { rawValue, ...inputProps } = phone
 
<input {...inputProps} placeholder="(555) 555 55 55" />

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