In this challenge, you will build a versatile textarea component as part of a design system. These components will be essential for forms, data entry interfaces, and other interactive elements across various projects and apps found within the platform.

Implementation requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Accessibility: Text Input components should meet AA standards of WCAG 2.1, including keyboard navigation and ARIA attributes for screen readers.
  • Clicking on the label should focus on the <textarea>.
  • Hint text / error message is associated with the <textarea> via the appropriate aria- attributes.

Component properties

• Customizable: The component should be allow for customizing of the label, placeholder, error message, maximum number of characters.
• States: The follow states should be supported: Normal, Filled, Focused, Disabled, Error and other reasonable combinations.