Inputs Field "Switchboard"

a.k.a Form

Forms are configured using serializable data structures.

Consider, a simple text control:

{
  "type": "text",
  "name": "name",
  "label": "Your Name"
}

Now, add some validation (provided by RHF Options):

{
  "type": "text",
  "name": "name",
  "label": "Your Name",
  "options": {
    "required": "Name is required",
    "maxLength": {
      "value": 20,
      "message": "Name is too long"
    }
  }
}

Using regex for pattern validation (sill serializable!):

{
  "type": "text",
  "name": "name",
  "label": "Your Name (no numbers!)",
  "options": {
    "pattern": {
      "value": "/^[A-Za-z]+$/i",
      "message": "Name must be alphabetic"
    }
  }
}

With more available types:

type SwitchInputType = 
  "text" |
  "password" |
  "multiline" |
  "number" |
  "email" |
  "checkbox" |
  "select" |
  "radio" |
  "switch" |
  "media" |
  "date"

And loads of options:

export type SwitchInputField = {
  type: SwitchInputType;
  name: string;
  defaultValue?: string | number | boolean;
  label?: string;
  realtime?: boolean; 
  placeholder?: string;
  help?: {
    text?: string;
    linkUrl?: string;
    linkText?: string;
  };
  disabled?: boolean;
  hidden?: boolean;
  width?: Width;
  previewType?: "hero" | "thumb" | "attachment";
  options?: SerializableOptions;
  choices?: Choice[];
};