Form and Function with Formwerk – Insights from Abdelrahman Awad’s Vue.js Nation 2025 Talk

This article is based on Abdelrahman Awad's talk at Vue.js Nation 2025, titled "Form and Function with Formwerk." In this talk, Abdelrahman discussed the challenges of creating accessible and high-quality forms in the web development landscape. Formwerk, is a Vue.js framework that simplifies forms by providing a comprehensive suite of composables for building accessible, high-quality, and scalable form components.

Introduction to Formwerk

Formwerk is a new form library for Vue.js developed over the past year (2024). Unlike existing libraries, it introduces a fresh approach to form handling by residing at a unique abstraction layer.

Comparison with Existing Libraries

Formwerk is distinct in its positioning compared to other libraries like VeeValidate and FormKit. While VeeValidate offers flexibility at a lower abstraction layer focusing on data validation, it lacks features like accessibility due to its limited UI interaction. On the other hand, UI libraries such as FormKit provide extensive accessibility features but can be challenging to customize.

Unlike other libraries, Formwerk deliberately excludes UI components, recognizing that design needs vary across projects. Instead, it provides a rock-solid foundation of accessibility, validation, state management, and interaction patterns that work seamlessly with your custom styling. It addresses common trade-offs in form libraries, providing a balanced approach that suits various development needs.

"Formwerk sits at a different abstraction layer than other form libraries. […] Formwerk is customizable, accessible, and provides flexibility." ~ Abdelrahman

Here you can see its features as described in GitHub:

✨ Features

• 📦 Comprehensive: Ready-made composables for all common form elements.
• ♿ Accessible: ARIA compliant with full keyboard navigation and semantic markup.
• 🌐 i18n Ready: Built-in internationalization with RTL and number formatting support.
• 🔌 Headless Architecture: Build form components with complete control over markup and styling.
• ✅ Form Validation: Native HTML5 and Standard Schema libraries support.
• 🎨 Styling Agnostic: Works with any CSS framework or plain CSS.
• 🎮 Built-in Behaviors: Native-like keyboard interactions and focus management.
• 🏗 Organization: Form groups and repeatable field arrays.
• ⚡ SSR Ready: Full support for Server Side Rendering environments.
• 🔄 State Management: Automatic form state and value tracking.
• 🌳 Tree-shakable: Only include the composables you actually use.
• 🎯 Type Safe: Full TypeScript support with generic typing.

Target Audience for Formwerk

Developers seeking an innovative solution for form creation that balances control with abstraction will find Formwerk particularly beneficial. By offering a middle ground between low-level flexibility and high-level accessibility features, it presents an attractive option for developers aiming for streamlined yet powerful form handling.

Key Features of Formwerk

Abdelrahman also discussed creating forms that are both accessible and high-quality, a challenge developers frequently encounter. Formwerk, as a library of headless composables for Vue.js, offers a compelling solution by providing a comprehensive set of tools that prioritize accessibility, internationalization, interaction, and validation without compromising on design flexibility. Let’s see some more details:

Customizability and Flexibility: Formwerk is unique in its approach to customizability. It offers no markup, no UI, and no CSS. This means you have complete control over the styles and markup, providing the flexibility to build your website and brand exactly as you envision it without battling with pre-existing styles.

Accessibility Features: Formwerk is designed with accessibility in mind. It implements all ARIA guidelines and recommended patterns for inputs. This ensures that each input behaves as expected with the correct attributes in place.

Interaction Management: Interactions are handled seamlessly by Formwerk. It supports keyboard shortcuts and focus management for elements like selects and combo boxes. This aligns with user expectations for intuitive interactions.

Internationalization Support: While Formwerk doesn't handle message translations (leaving that to libraries like Vue I18n), it focuses on behaviors related to internationalization issues such as right-to-left language support.

Last but not least, Formwerk offers a robust developer experience by supporting features like form trees, state tracking, validation organization through form groups or repeaters, submission handling, and more.

How to Integrate Formwerk into Existing Projects

Formwerk is ideal for developers who build projects from scratch. It provides high-quality interactions using JavaScript and offers props for various UI elements.

Formwerk provides several field types like text fields, sliders, select fields, and checkboxes. Each field has a defined anatomy with composables that you can import and use. You bind these props to elements in your markup and add your styles.

For more information, you can check out the documentation and code examples here.

Styling and UI Considerations

You can use Tailwind or your CSS to style fields. For instance, a slider component uses prop objects like groupProps, trackProps, labelProps which you bind to the right elements. Formwork gives you composables to build components efficiently. You end up with components that handle touch events and keyboard navigation seamlessly!

Accessibility Best Practices

Accessibility is crucial. Formwerk follows ARIA guidelines closely by auto-associating inputs and labels using techniques like ref capture systems. This ensures accessibility even in complex UI setups. A typical label-input combo might look like this:

<label for="inputId">Label</label>
<input id="inputId" />

Formwerk adapts even if the labels are visually hidden or implemented differently. It maintains accessibility by using aria-label appropriately based on the setup.

Interaction Best Practices

Formwerk ensures high-quality interactions without CSS dependency but focuses on JavaScript to support comprehensive keyboard navigation across fields like selects and combo boxes.

The library supports complex interactions such as focus management according to ARIA guidelines and handles various keyboard operations efficiently.

By integrating Formwerk into your Vue.js projects, you can achieve accessible forms with robust interaction patterns effortlessly. The library's support for internationalization and validation makes it an indispensable tool for modern web development.

Coming Up and Roadmap

Formwerk is asynchronous by default and handles async validation efficiently. Here’s a glimpse of what’s coming in the future:

• Comparison with Other UI Libraries: Formwerk stands out with its unique approach to handling asynchronous validations and its comprehensive support for internationalization. It supports multiple numeral systems and calendars, making it versatile for global applications.
• Handling Async Validation: The library efficiently manages async validation by allowing developers to control validation flow using simple function calls. This is particularly helpful when integrating with popular validation libraries like Zod and Valibot.
• Future Roadmap for 2025:
  • Date Fields by the end of February.
  • Dev Tools at the same timeline.
  • File Fields also by February.
  • Autocomplete Fields next month in March.
  • Multi-step Forms coming in March.
  • Starter Kits are anticipated around April.
  • Aiming for V1 by April.

Conclusion

In summary, Formwerk presents a groundbreaking approach to form development in Vue.js, offering a balance between flexibility and functionality. By focusing on accessibility, internationalization, and seamless integration, Formwerk empowers developers to create intuitive and efficient forms. Its headless model and compatibility with popular validation libraries make it a versatile choice for modern web applications. As it continues to evolve, it promises to address the ever-changing needs of developers, ensuring a robust and user-friendly experience.