Custom form input component

This demo lets you preview custom input component, its variations, options and different states.

Basic
Label & Placeholder
Input type - email
Input type - number
Required
Disabled
Filled
Invalid - predefined messages

There is set of predefined error messages which are displayed depending on validation error. In this example you can see minLength error message. Messages are prepared for required, requiredTrue, min, max, minLenghth, maxLength, email and pattern validation errors.

The minimum length of field should be 10
Invalid - custom message

There is possibility to set your own custom error message.

This is custom error message

Playground

Here you can try all the functionality by yourself.