diff --git a/src/Form/FormControl.jsx b/src/Form/FormControl.jsx
index b167e42e32..9131077c2d 100644
--- a/src/Form/FormControl.jsx
+++ b/src/Form/FormControl.jsx
@@ -9,6 +9,8 @@ import FormControlDecoratorGroup from './FormControlDecoratorGroup';
import { callAllHandlers, useHasValue } from './fieldUtils';
+const DEFAULT_MASK_VALUE = '00-00-000';
+
const FormControl = React.forwardRef(({
as,
className,
@@ -18,7 +20,8 @@ const FormControl = React.forwardRef(({
floatingLabel,
autoResize,
onChange,
- withMask,
+ hasInputMask,
+ mask,
...props
}, ref) => {
const {
@@ -73,7 +76,7 @@ const FormControl = React.forwardRef(({
className={className}
>
@@ -124,6 +128,10 @@ FormControl.propTypes = {
isInvalid: PropTypes.bool,
/** Only for `as="textarea"`. Specifies whether the input can be resized according to the height of content. */
autoResize: PropTypes.bool,
+ /** Specifies whether to use an input mask for the input. */
+ hasInputMask: PropTypes.bool,
+ /** Specifies the input mask to be used if `hasInputMask` is set to `true`. */
+ mask: PropTypes.string,
};
FormControl.defaultProps = {
@@ -142,6 +150,8 @@ FormControl.defaultProps = {
isValid: undefined,
isInvalid: undefined,
autoResize: false,
+ hasInputMask: false,
+ mask: DEFAULT_MASK_VALUE,
};
export default FormControl;
diff --git a/src/Form/form-control.mdx b/src/Form/form-control.mdx
index 6ecdde47d5..61cac13dea 100644
--- a/src/Form/form-control.mdx
+++ b/src/Form/form-control.mdx
@@ -43,90 +43,6 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
}
```
-## Input phone mask
-
-```jsx live
-() => {
- const [value, setValue] = useState('');
-
- return (
-
- }
- trailingElement={}
- floatingLabel="What kind of cats?"
- value={value}
- onAccept={
- (value, unmaskedValue, mask) => console.log(unmaskedValue)
- }
- onChange={(e) => setValue(e.target.value)}
- />
-
- );
-}
-```
-
-## Input card number mask
-
-```jsx live
-() => {
- const [value, setValue] = useState('');
- console.log('============ value ===========', value);
- return (
-
- }
- trailingElement={}
- floatingLabel="What kind of cats?"
- value={value}
- onChange={(e) => setValue(e.target.value)}
- />
-
- );
-}
-```
-
-## Input date mask
-
-```jsx live
-() => {
- const [value, setValue] = useState('');
- console.log('============ value ===========', value);
- return (
-
- }
- trailingElement={}
- floatingLabel="What kind of cats?"
- value={value}
- onChange={(e) => setValue(e.target.value)}
- />
-
- );
-}
-```
-
-## Input Google-style OTP mask
-
-```jsx live
-() => {
- const [value, setValue] = useState('');
- console.log('============ value ===========', value);
- return (
-
- }
- trailingElement={}
- floatingLabel="What kind of cats?"
- value={value}
- onChange={(e) => setValue(e.target.value)}
- />
-
- );
-}
-```
-
-
## Input types
```jsx live
@@ -246,6 +162,163 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
}
```
+## Input masks
+Paragon uses the [react-imask](https://www.npmjs.com/package/react-imask) library, which allows you to add masks of different types for inputs.
+To create your own mask, you need to pass the required mask pattern (`+{1}(000)000-00-00`) to the `mask` property.
+See [react-imask](https://imask.js.org) for documentation on available props.
+
+```jsx live
+() => {
+ {/* start example state */}
+ const [maskType, setMaskType] = useState('phone');
+ {/* end example state */}
+
+ const inputsWithMask = {
+ phone: (
+ <>
+ Phone
+
+ }
+ floatingLabel="What is your phone number?"
+ />
+
+
+ ),
+ creditCard: (<>
+ Credit card
+
+ }
+ floatingLabel="What is your credit card number?"
+ />
+
+ ),
+ date: (<>
+ Date
+
+ }
+ floatingLabel="What is your date of birth?"
+ />
+
+ ),
+ securePassword: (<>
+ Secure password
+
+ }
+ floatingLabel="What is your password?"
+ />
+
+ ),
+ OTPpassword: (<>
+ OTP password
+
+ }
+ floatingLabel="What is your OPT password?"
+ />
+
+ ),
+ price: (
+ <>
+ Course prise
+
+ }
+ floatingLabel="What is the price of this course?"
+ />
+
+
+ ),
+ };
+
+ const [value, setValue] = useState('');
+
+ const handleChange = (e) => setValue(e.target.value);
+
+ return (
+ <>
+ {/* start example form block */}
+
+ {/* end example form block */}
+
+ {inputsWithMask[maskType]}
+
+ );
+}
+```
+
+## Input masks with clear value
+`unmask` prop allows get and set value and unmasked value easily
+
+```jsx live
+() => {
+ const [value, setValue] = useState('');
+
+ return (
+
+ }
+ trailingElement={}
+ floatingLabel="What kind of cats?"
+ value={value}
+ unmask
+ onChange={(e) => setValue(e.target.value)}
+ onAccept={
+ (value) => console.log(value)
+ }
+ />
+
+ );
+}
+```
+
## Textarea autoResize
`autoResize` prop allows input to be resized according to the content height.