Input Mask
Import
import { VKInputMask } from "@vivakits/react-components";Mask
The component must be provided with using mask where digit groups (9) or character groups (a) are separated by preferred delimeter.
Placeholder
The component can have a placeholder text using the placeholder prop. The placeholder text will be displayed when the input field is empty.
Slot character
Default placeholder for a mask is underscore that can be customized using slotChar property.
Auto Clear
When the input does not complete the mask definition, it is cleared by default. Use autoClear property to control this behavior
Size
The InputMask component comes with 4 different sizes that you can change using the size prop.
Color
The InputMask component comes with 6 different colors that you can change it using the color prop. It has both solid and outline variant.
Rounded
The shape of the inputMask component can be updated using rounded prop.
Icon
An icon can be appended or prepended using icon prop. The position of the icon can be specified by the iconPosition prop.
Error
Conditional error handling for input can be done via hasError prop. Error message can also be modified via errorMessage prop.
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| mask | string | Mask pattern | |
| onChange | function | Callback function to get the value of the input field | |
| placeholder | string | Mask for the input field | |
| slotChar | string | Placeholder character in mask | _ |
| autoClear | boolean | Clears the incomplete value on blur | true |
| color | primarysecondaryaccentsuccesswarningdanger | Changes input color | primary |
| size | smmdlgxl | Changes input size | md |
| rounded | defaultnonexssmmdlgfulll | Changes the border radius of input | primary |
| icon | ReactNode | Append or prepend an icon inside the input box | - |
| iconPosition | startend | Determine the position of the icon | start |
| placeholder | string | Place a text inside the input box | - |
| label | string | label of the input box | - |
| labelPosition | startendhorizontal | Determine the position of the label of input box | start |
| labelClassName | string | Changes style of the label of input box | - |
| hasError | boolean | Shows error | false |
| errorMessage | string | Modify the error message | Invalid input value |
| wrapperClassName | string | Modify the appearance of input box | - |