Google Code-in

Create an input field component that can show different behaviour depending on passed props.

Create a Controlled Component that can be used as the following;

• Normal Input field
• Disabled Input field

Considerations:

• Build this component from scratch. You can check other libraries for inspiration.
• Component should expose props to handle relevant events.
• Allow passing a separate validator function as a prop to validate input.
• If the input is invalid as per the passed validator function, the user should be notified visually. How to do this is up to you. It should also be possible to check if the component has valid input or not, programmatically. This is important to control form submissions.
• Must allow showing a placeholder if provided.
• Width and height should be customizable. Also provide knobs on storybook.
• Follow OpenMRS design theme - colors, fonts, icons. Use Material design icons if needed and available.
• Feel free to make suggestions and improvements.
• Follow the instructions at the repository (especially the Gitflow workflow) and the OpenMRS pull request tips.

Repository: (https://github.com/merovingienne/openmrs-module-ui-react)