Skip to main

ember-headless-form

The Ember.js addon that distills the common behavior and accessibility best practices of forms into reusable components, without any opinions on specific markup or styling. Use it to build your forms directly, or to build your opinionated forms component kit on top of it.

Getting started GitHub

Why use this addon?

Forms aren't exactly a new thing, so why use this addon? Existing solutions are either not using the latest Ember paradigms (Octane/Polaris), generate specific markup and are thus hard to customize, or are coupled to a specific validation library. ember-headless-form is none of this. It gives you all the flexibility, without having to reinvent the wheel.

These are the main problems it solves:

  • Getting data in and out of the form
  • Rendering semantic form markup, accessible by default
  • Provide rich support for client-side validation

TypeScript/Glint

Written in TypeScript/Glint, with TypeScript/Glint users in mind. Get strict type checking of its components, arguments and form data, together with API docs right in your IDE.

Accessibility

Bakes accessibility best practices into the addon, so you have to care less. It does not render much, but what it renders is pure semantic and ARIA enriched form markup, tested for a11y.

Native validation

Integrates native HTML5 based form validation seamlessly, with custom error rendering. Use it alone, or mix it with custom validations.

Custom validation

Where native validation falls short, you can extend that with custom JavaScript-based validation rules. Either by writing your own functions, or by integrating 3rd party validation libraries.

ember-changeset

Integrate ember-changeset and ember-changeset-validations seamlessly into your forms, offloading the form validation to the validations defined on your Changeset.

yup

Use the popular TypeScript-friendly validation library to validate your form data with a yup schema.