<FormattedInput mask={businessIdMask} placeholder="123 456 789 00012" />businessIdMask, idNumberMask and phoneMask ship with the component. The
value you get back is unformatted, so what you store is digits and the grouping
is only ever presentation.
API
| Prop | Type | Default | |
|---|---|---|---|
mask | string | required | Digit mask, e.g. "### ### ### #####" for a business id. # marks a digit slot. |
defaultValue | string | — | Raw digits (unformatted). |
onValueChange | ((value: string) => void) | — | Receives the raw digits whenever they change. |
value | string | — | Raw digits (unformatted). |
className | string | ((state: InputState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ComponentRenderFn<HTMLProps, InputState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: InputState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
Plus the DOM props of the element it renders. Source: formatted-input/components/formatted-input.tsx.