Form component

[leonid]

A Form component is a fundamental UI element that allows users to input and submit data. Here are the key features a Form component must have:

1. Form Elements: Support for various form elements such as input fields, text areas, checkboxes, radio buttons, dropdowns, etc.
2. Validation: Built-in validation for form fields, including custom validation rules.
3. Error Handling: Display error messages for invalid fields.
4. Submission Handling: Ability to handle form submission, including synchronous and asynchronous submissions.
5. Reset Functionality: Option to reset the form to its initial state.
6. Field Grouping: Ability to group related fields together.
7. Custom Styling: Ability to customize the appearance through CSS classes or styles.
8. Accessibility: Ensure the form is accessible with proper ARIA attributes and keyboard navigation.
9. Form State Management: Manage the state of the form, including tracking changes and form validity.
10. Dynamic Fields: Support for adding or removing fields dynamically.
11. Field Dependencies: Handle dependencies between fields, such as showing/hiding fields based on other field values.
12. Default Values: Ability to set default values for form fields.
13. Event Handling: Emit events for user interactions such as focus, blur, input, change, submit, etc.
14. File Uploads: Support for file upload fields.
15. Multi-Step Forms: Ability to create multi-step forms with navigation between steps.
16. Form Layouts: Support for different form layouts, such as horizontal, vertical, and grid-based layouts.

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

TODO

• We decided to take existing components from GoBan for forms
• We just need to transfer, Slava seems to have already transferred
• change component names to Acv
• Correct component exports and documentation
• And then bring the appearance in line with the new design, with new variables
• transfer existing GoBan component it as is

Design

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