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