Stencil Forms

Stencil Forms is a tool for managing complex form state in Stencil projects.

🚨 This component is built for Stencil apps, not vanilla Web Component projects. It might be possible to use it in vanilla projects, but I wouldn't recommend it. 🚨

<stencil-form /> is heavily inspired by Formik and react-beautiful-dnd (both React-based solutions), except relying Web Components and standard, built-in browser features.

Example Usage

import { FormRenderProps } from "stencil-form";
interface FormValues {
  demo: string;
}

// In the `your-component` render function
<stencil-form
  initialValues={{ demo: "Hello world!" }}
  renderer={(props: FormRenderProps<FormValues>) => {
    const { errors, groupProps, labelProps, inputProps, formProps } = props;
    return (
      <form {...formProps}>
        <div {...groupProps("demo")}>
          <label {...labelProps("demo")}> Demo </label>
          <input {...inputProps("demo")} type="text" required />
          {errors.demo && (
            <label class="error" {...labelProps("demo")}>
              {errors.demo}
            </label>
          )}
        </div>
      </form>
    );
  }}
/>;

Styling

Styling is entirely up to you! The component provides minimal, mildly opinionated resets for input and select elements but stops short of removing things like ::-webkit-inner-spin-button or ::-ms-clear. If you'd like to ensure cross-browser consistency, I'd highly reccommend reading TJ VanToll's pseudo-element list.

In order to allow maximum flexibility, <stencil-form /> does not use Shadow DOM. If the ::part and ::theme proposal is rolled out, that might change—for now, Shadow DOM makes it too difficult for developers to implement custom styles.

Installation

This package in unpublished at the moment. It will be available on NPM soon.

To build locally, just clone this monorepo.

lerna bootstrap
cd packages/demo
npm start