Masks

Pattern masks such as (000) 000-0000 and locale date masks.

Reach for them for formatted text input. The helpers are pure: no DOM at import time or in the call path, so they run on the server and in tests. Each result below is computed when the page is built, by running the call shown.

Import

import {
	applyInputMask,
	parseMaskPattern,
	formatWithMask,
	extractMaskInput,
	maskToPlaceholder,
	maskInputSlotCount,
	buildDateMaskPattern,
	applyDateMask,
	getDefaultDatePlaceholder,
	maskedDigitsToParts,
	partsToDate,
} from '@ecopages/radiant-ui/helpers';

Pattern masks

In a pattern 0 is a digit slot, a a letter and * any character; {text} is fixed text that counts as input, [...] an optional section and \ escapes the next character. Other characters are literals. parseMaskPattern turns a pattern into tokens that formatWithMask and extractMaskInput use.

Date masks

The mask and placeholder come from the locale, and typed digits map back to a date in the locale's field order.