Field

A Field is responsible for consuming a slice of data from its' parent form's state. A Field essentially owns that slice of data although other Field's can subscribe and mutate that data if needed. The goal of the Field component is to abstract away all of the complexities of dealing with form inputs including:

• Validation
• Error Management
• Focus Management
• Accessibility

User Interface

By default a Field just renders a single html input however for most projects you will probably want to render your own user interface. You can render your own user interface using the as property of a Field.

The example below shows a custom component being rendered. The component you pass in will recieve several props that you can use to display information related to the field:

• error - The error if there is one
• input - Props belonging to the html input
• actions - An object that contains functions that you can use to interact with a fields state

You can view the full api spec of the field here.

import { Form, TextField, NumberField, ErrorMessage } from "@zerry/react-formz";

type FormState = {
  name: string;
  age: number;
};

function MyForm() {
  function handleSubmit(data) {
    apiRequest(data);
  }

  return (
    <Form<FormState>
      initialValues={{
        name: "",
        age: "",
      }}
      name="SimpleForm"
      onSubmit={handleSubmit}
      resetOnSubmit
    >
      <TextField
        name="name"
        label="Name"
        required
        as={({ input: { label, ...input } }) => (
          <>
            <label htmlFor={input.name}>{label}</label>
            <input {...input} />
            <ErrorMessage field={input.name} />
          </>
        )}
      />
      <NumberField
        name="age"
        label="Age"
        required
        min={18}
        max={75}
        as={({ input: { label, ...input } }) => (
          <>
            <label htmlFor={input.name}>{label}</label>
            <input {...input} />
            <ErrorMessage field={input.name} />
          </>
        )}
      />
    </Form>
  );
}

Helper Components

A first principle of React Formz is to be declarative, that's the whole point of using React in the first place, right? Forms are no different, as a result we export a number of wrapper components like NumberField that come with defaults and type safety to make your forms easy to ready and type-safe.

TextField

An abstraction of Field that can be used for text field values. The default input type will be text but can be overriden.

The value of this field can only be a string.

NumberField

An abstraction of Field that can be used for number field values. The default input type will be number.

The value of this field can only be a number.

CheckboxField

An abstraction of Field that can be used for boolean field values. The default input type will be checkbox.

The value of this field can only be a boolean.

RadioField

An abstraction of Field that can be used for radio field values. The default input type will be radio.

The value of this field can only be a string.

SelectField

An abstraction of Field that can be used for boolean field values. The default input type will be select.

The value of this field can only be a boolean.

MultiSelectField

An abstraction of Field that can be used for boolean field values. The default input type will be select with a multiple property added to the input.

The value of this field can only be a string.

CustomField

A custom field is a Field where the value is not your typical html input value like your usual string, number, date, etc.

This field is great for integrating with third party libraries who's api's are not standard html input such as react-select.

Example Usage:

// The value of this custom field is a tuple of dates: [Date, Date].
<CustomField<[Date, Date]>
  as={({ input: { value, ...input } }) => (
    <ReactDatePicker {...input} startDate={value[0]} endDate={value[1]} />
  )}
/>