functorism/solid-formlet

Functional combinators for building reactive forms with SolidJS

solid-formlet

Functional combinators for building reactive forms

• Docs/Reference

Quick start

Install it:

npm i solid-formlet
# or
yarn add solid-formlet
# or
pnpm add solid-formlet

Use it:

import { createForm, Form, Formlet } from 'solid-formlet';

const userFullName = (user: User) =>
  Form.Group(
    "fullname",
    Form.lift(
      (name: string, surname: string) => ({ name, surname }),
      Formlet.netext("name", user.fullname.name),
      Formlet.netext("surname", user.fullname.surname),
    ),
  );

const App = (props: { user: User }) => {
  const [value, element] = createForm(userFullName(props.user));

  createEffect(() => console.log("%cchanged", "color:blue", value()));

  return (
    <form
      onInvalid={() => {
        console.log("%cinvalid", "color:red", value());
      }}
      onSubmit={(ev) => {
        ev.preventDefault();
        console.log("%csubmitted", "color:green", value());
      }}
    >
      {element}
      <button type="submit">Submit</button>
    </form>
  );
};