Field Sets

A field set is a collection of individual fields. Here's how the example plain field set is constructed:

import Input, { isValid as inputIsValid } from "./Input";
import CheckBox, { isValid as checkBoxIsValid } from "./CheckBox";
import Select, { isValid as selectIsValid } from "./Select";
import RadioGroup, { isValid as radioGroupIsValid } from "./RadioGroup";
import Dummy from "./Dummy";

const fields = {
    text: {
        component: Input,
        isValid: inputIsValid
    },
    number: {
        component: Input,
        isValid: inputIsValid
    },
    email: {
        component: Input,
        isValid: inputIsValid
    },
    password: {
        component: Input,
        isValid: inputIsValid
    },
    tel: {
        component: Input,
        isValid: inputIsValid
    },
    time: {
        component: Input,
        isValid: inputIsValid
    },
    date: {
        component: Input,
        isValid: inputIsValid
    },
    checkbox: {
        component: CheckBox,
        isValid: checkBoxIsValid
    },
    select: {
        component: Select,
        isValid: selectIsValid
    },
    radio: {
        component: RadioGroup,
        isValid: radioGroupIsValid
    },
    dummy: {
        component: Dummy,
        isValid: () => true
    }
};

export default fields;

It's basically a simple object, where each field type has its own key containing the field component and a default validation function.

The Input component is used multiple times as it can be used for multiple standard web input types. Currently, the same simple validation function is used for all of them. In a real fieldset you would create different functions for the different types, for example the email type with an email validation, the password maybe with a password strength validation and so on.