Getting Started

What is Formwerk?

Formwerk is a library of headless composables for Vue.js that helps you build accessible, high-quality form components for your applications or design systems.

It offers you a comprehensive tree-shakable set of composables that take care of accessibility, interaction, validation, and best behavior practices out of the box, allowing you to focus on your unique design and styling.

This library aims to offer an uncompromising new baseline of accessibility, interaction, and quality for building forms in Vue.

Getting Started

1. Install Formwerk with your package manager of choice.

   npm

   npm install @formwerk/core

   yarn

   yarn add @formwerk/core

   pnpm

   pnpm add @formwerk/core

2. Import the composable you need into your component.

   TextField.vue

   <script setup lang="ts">
   import { TextFieldProps, useTextField } from '@formwerk/core';
   
   const props = defineProps<TextFieldProps>();
   
   const { inputProps, labelProps, errorMessage, errorMessageProps } =
     useTextField(props);
   </script>
   
   <template>
     <div>
       <label v-bind="labelProps">{{ label }}</label>
       <input v-bind="inputProps" />
   
       <div v-if="errorMessage" v-bind="errorMessageProps">
         {{ errorMessage }}
       </div>
     </div>
   </template>

3. Use your component!

   App.vue

   <script setup>
   import { TextField } from './TextField.vue';
   
   const email = ref('');
   </script>
   
   <template>
     <TextField label="Email" type="email" v-model="email" />
   </template>

Where to next?

You can either start using the composables to build your various form components, or you can start using the starter kits to get a head start on your next project.

Alternatively, follow the next guide to read our elevator pitch for Formwerk and why you might want to use it in your project. We’ll also cover some of the core concepts and ideas that Formwerk is built on.