Input component

[leonid]

An Input component is a fundamental UI element that allows users to enter and edit text. Here are the key features an Input component must have:

1. Basic Input Types: Support for various input types such as text, password, email, number, etc.
2. Placeholder Text: Ability to display placeholder text when the input is empty.
3. Label: Option to include a label for the input field.
4. Validation: Built-in validation for different input types and custom validation rules.
5. Error Messages: Display error messages when validation fails.
6. Disabled State: Ability to disable the input field.
7. Read-Only State: Option to make the input field read-only.
8. Clear Button: Option to include a clear button to reset the input value.
9. Prefix and Suffix: Ability to add prefix and suffix elements/icons inside the input field.
10. Size Variants: Support for different input sizes (small, medium, large).
11. Custom Styling: Ability to customize the appearance through CSS classes or styles.
12. Accessibility: Ensure the input is accessible with proper ARIA attributes and keyboard navigation.
13. Events: Emit events for user interactions such as focus, blur, input, change, etc.
14. Auto-Complete: Support for browser auto-complete functionality.
15. Max Length: Option to set a maximum length for the input value.
16. Default Value: Ability to set a default value for the input field.

These features ensure that the Input component is versatile, user-friendly, and accessible.

Design

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Syntax-UI-3.0?node-id=56-726&m=dev

Implementation notes

• input should have consistent background within all provided states, as valid/invalid, disabled, pristine/dirty etc.