xabi1000/input-components

Input Component Challenge

This project creates a reusable input component that meets all the test requirements.

Requirements

• The component must have the following states:
  • Normal
  • Mistake
  • Disabled
  • With help text
  • With icon (left or right)
  • With different input sizes
  • With different colors
  • That occupies the entire width of the parent
  • With multi-line input
  • With visual indicators when hovering or focusing
  • Still support all standard input attributes

Implementation

The component is implemented using the Svelte library. Google's Material Design framework is used for icons and styles.

demo

The component can be seen in action at the following URL: https://inputs-challenge.netlify.app/

Author

This project was created by xabiCode.