Build
High-Quality
High-Quality

Vue.js form components

A suite of Vue.js composables designed to enhance your forms with built-in behaviors, interactions, internationalization, and accessibility, seamlessly integrating with your markup and styles.

Get started Composables

Craft with your own styles.

Formwerk provides a blank canvas, free of predefined styles or HTML, enabling you to craft a custom design system using any styling or animation library. Each composable integrates with its designated elements, managing behavior and state while leaving the structure and styling entirely in your hands.

<script setup lang="ts">
import { useSlider, type SliderProps } from '@formwerk/core';
import Thumb from './Thumb.vue';

const props = defineProps<SliderProps>();

const {
  trackProps,
  groupProps,
  labelProps,
  errorMessage,
  errorMessageProps,
  useThumbMetadata,
} = useSlider(props);

const t1 = useThumbMetadata(0);
const t2 = useThumbMetadata(1);
</script>

<template>
  <div class="slider" v-bind="groupProps">
    <div
      v-bind="labelProps"
      class="mb-1 block w-full text-sm font-semibold text-white"
    >
      {{ label }}
    </div>

    <div
      v-bind="trackProps"
      class="track mb-6 mt-5 flex h-1.5 items-center rounded-md bg-stone-500"
    >
      <Thumb />
      <Thumb />
    </div>

    <div v-if="errorMessage" v-bind="errorMessageProps">
      {{ errorMessage }}
    </div>
  </div>
</template>

<style scoped>
.slider {
  --track-width: 200px;

  .track {
    width: var(--track-width);

    &::before {
      @apply h-1.5 rounded-md bg-emerald-500 content-[''];
      translate: calc(v-bind('t1.sliderPercent') * var(--track-width)) 0;
      width: calc(
        (v-bind('t2.sliderPercent') - v-bind('t1.sliderPercent')) * 100%
      );
    }
  }
}
</style>

Preview

Price Range

200

800

<script setup lang="ts">
import { useSwitch, type SwitchProps } from '@formwerk/core';

const props = defineProps<SwitchProps>();

const { inputProps, labelProps, isPressed } = useSwitch(props);
</script>

<template>
  <div class="switch-wrapper">
    <div
      v-bind="inputProps"
      class="switch"
      :class="{ 'switch--active': isPressed }"
    >
      <div class="switch__thumb"></div>
    </div>

    <div class="switch__label" v-bind="labelProps">
      {{ label }}
    </div>
  </div>
</template>

<style scoped>
@import 'https://unpkg.com/open-props@1.7.7/open-props.min.css';

.switch-wrapper {
  display: flex;
  align-items: center;
}

.switch {
  display: flex;
  width: var(--size-8);
  align-items: center;
  padding: var(--size-1);
  border-radius: var(--radius-round);
  cursor: pointer;
  background: var(--gray-6);
  transition: background-color var(--animation-duration-medium) var(--ease-3);
}

.switch:focus {
  outline: 4px solid var(--green-4);
}

.switch--active {
  background: var(--green-6);
}

.switch__thumb {
  height: var(--size-4);
  width: var(--size-4);
  flex-shrink: 0;
  border-radius: var(--radius-round);
  background: var(--gray-0);
  transform-origin: center;
  transition: transform 1s var(--ease-spring-5);
}

.switch--active .switch__thumb {
  transform: translateX(var(--size-4));
}

.switch__label {
  margin-left: var(--size-3);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-5);
  color: var(--gray-0);
}
</style>

Preview

Switch

<script setup lang="ts">
import { type TextFieldProps, useTextField } from '@formwerk/core';

const props = defineProps<TextFieldProps>();

const { inputProps, labelProps, errorMessage, errorMessageProps } =
  useTextField(props);
</script>

<template>
  <div class="TextField">
    <label v-bind="labelProps">{{ label }}</label>
    <input v-bind="inputProps" />

    <div v-bind="errorMessageProps" class="error">
      {{ errorMessage }}
    </div>
  </div>
</template>

<style scoped>
.TextField {
  position: relative;
  width: 100%;
  max-width: 20rem;
  margin-bottom: calc(1em * 1.5);

  label {
    display: block;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
  }

  input {
    width: 100%;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    border: 1px solid rgb(63, 63, 70);
    background-color: rgb(39, 39, 42);
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    color: white;
    transition-property: all;
    transition-duration: 200ms;

    &:focus {
      border-color: rgb(16, 185, 129);
      outline: none;
      box-shadow: 0 0 0 1px rgb(16, 185, 129);
      background-color: rgb(24, 24, 27);
    }

    &:hover {
      background-color: rgb(24, 24, 27);
    }

    &:user-invalid {
      border-color: rgb(239, 68, 68);
      outline: none;
      box-shadow: 0 0 0 1px rgb(239, 68, 68);
      background-color: rgb(39, 39, 42);
    }

    &::placeholder {
      color: rgb(161, 161, 170);
    }
  }

  .error {
    position: absolute;
    left: 0;
    display: none;
    font-size: 0.875rem;
    color: rgb(239, 68, 68);
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
  }

  &:has(:user-invalid) {
    .error {
      display: block;
    }
  }
}
</style>

Preview

Field

Thoughtfully accessible.

Aria Semantics

Formwerk follows the W3C ARIA Authoring Practices Guide, ensuring proper aria attributes and keyboard interactions for all input types.

Adaptive Attributes

You can use almost any HTML markup you prefer. The attributes and listeners will adapt based on the elements you use.

Built for international users.

Formwerk is built for international audiences, with support for RTL, localized number formatting and parsing with multiple numbering systems, and integrates with vue-i18n and nuxt-i18n.

Number

Locale

Numbering system

Format

Unit

Unit Display

Polished built-in interactions.

All components built with Formwerk will have the keyboard shortcuts, focus management, and behaviors that your users expect and rely on.

Select a country

Try the following interactions:

Focus the field, then press ⎵Space
.
Move through the list with ↓
and ↑
.
Select the focused option with ↩
or ⎵
.
Find "Egypt" in the list by typing "E...".
Focus the last option with End
or ⇟Page Down
.
Focus the first option with Home
or ⇞Page Up
.

Supercharge your forms.

Formwerk doesn't just help you build form controls, it also tackles the most annoying parts about forms, like value tracking, submissions, form groups, and repeaters. Also, validation with HTML attributes or with schema providers like Zod, Valibot, or Arktype, and more.

<script setup lang="ts">
import { type } from 'arktype';
import { useForm } from '@formwerk/core';
import TextField from './TextField.vue';

const { handleSubmit } = useForm({
  schema: type({
    email: type('string.email > 1'),
    password: type('string > 6'),
  }),
});

const onSubmit = handleSubmit((data) => {
  alert(JSON.stringify(data.toObject(), null, 2));
});
</script>

<template>
  <form @submit="onSubmit" novalidate>
    <TextField name="email" type="email" label="Email" />
    <TextField name="password" type="password" label="Password" />

    <button type="submit">Submit</button>
  </form>
</template>

Arktype

<script setup lang="ts">
import * as v from 'valibot';
import { useForm } from '@formwerk/core';
import TextField from './TextField.vue';

const { handleSubmit } = useForm({
  schema: v.object({
    email: v.pipe(v.string(), v.minLength(1), v.email()),
    password: v.pipe(v.string(), v.minLength(6)),
  }),
});

const onSubmit = handleSubmit((data) => {
  alert(JSON.stringify(data.toObject(), null, 2));
});
</script>

<template>
  <form @submit="onSubmit" novalidate>
    <TextField name="email" type="email" label="Email" />
    <TextField name="password" type="password" label="Password" />

    <button type="submit">Submit</button>
  </form>
</template>

Valibot

<script setup lang="ts">
import { z } from 'zod';
import { useForm } from '@formwerk/core';
import TextField from './TextField.vue';

const { handleSubmit } = useForm({
  schema: z.object({
    email: z.string().email().min(1, 'Email is required'),
    password: z.string().min(6, 'Password must be at least 6 characters'),
  }),
});

const onSubmit = handleSubmit((data) => {
  alert(JSON.stringify(data.toObject(), null, 2));
});
</script>

<template>
  <form @submit="onSubmit" novalidate>
    <TextField name="email" type="email" label="Email" />
    <TextField name="password" type="password" label="Password" />

    <button type="submit">Submit</button>
  </form>
</template>

Zod

Start with Starter Kits!

To get you started quickly, we are working on a few starter kits for you that you can easily copy into your project. You can choose the starting point that suits you the most and then make it your own.

Minimal

A component kit that includes all Formwerk features with minimal styling, providing a clean foundation for your next project. Styled with plain CSS.

Check it out on GitHub

Atma

Our accented dark components used in the docs and showcase, styled with TailwindCSS.

Coming Soon

Frequently Asked Questions

Who is Formwerk for?

Formwerk is for developers who want to build high-quality, scalable forms. It is ideal for those building internal UI design systems or UI libraries intended for other developers.

How large is the bundle size?

Formwerk is tree-shakable, meaning only the composables you use will be included in your bundle. The total bundle size is around 18.2 kB gzipped.

What validation options does Formwerk provide?

Out of the box, you can use HTML validation attributes without any additional dependencies. Formwerk also supports Schema Standards, allowing you to use Zod, Valibot, Arktype, and other validation libraries with your forms.

What kind of composables are within the scope of Formwerk?

Any functionality related to forms or form management falls within Formwerk's scope. Beyond typical form components, we welcome suggestions for useful composables that could enhance form development.