Modular Forms

Add fields to form

To add a field to your form, you use the Field component. It is headless and makes its state accessible to its children via a render prop.

Field component

The Field component has a mandatory property called name which you use to specify which field it is. If you use TypeScript, you don't have to type the name yourself thanks to autocompletion.

Children prop

As a child, you pass a function to the Field component that returns JSX. You can use the first parameter of the function to access the current state of the field and the second parameter you have to pass to an HTML <input />, <textarea /> or <select /> element to connect it to your form.

import { createForm } from '@modular-forms/solid';

type LoginForm = {
  email: string;
  password: string;
};

export default function App() {
  const [loginForm, { Form, Field }] = createForm<LoginForm>();

  return (
    <Form>
      <Field name="email">
        {(field, props) => <input {...props} type="email" />}
      </Field>
      <Field name="password">
        {(field, props) => <input {...props} type="password" />}
      </Field>
      <input type="submit" />
    </Form>
  );
}

Please let us know via email or the issues on GitHub if something is unclear or you have ideas on how we can further improve the API and documentation.

Headless design

The Field component does not render its own UI elements. It is headless and provides only the data layer of the field. This allows you to freely define your user interface. You can use HTML elements, custom components or an external UI library.

Data types

If you want your field to capture a data type other than string, a second property called type is required. However, based on your type definition, we will recognize this, point it out in your code and help you fill in the value using autocompletion. This way we know your data type at runtime and can ensure that only valid values are captured.

<Field name="age" type="number">
  {(field, props) => <input {...props} type="number" />}
</Field>

Type safety

The API design of the Field component results in a fully type-safe form. For example, if you change the name of a field, TypeScript will immediately alert you. Also, you can't mistype when adding an error message, because it is taken from the provided state of the field. More about this on the next page.

Edit page