Using FormKit-Tools is simple. Just paste in a csv list or the fields from a Javascript object, a C# class, or a Java class constructor and hit "Go."
A table will show all the fields, which you can then simply map to a FormKit node.
Note: The table rows are drag and drop. You can change the order of the FormKit nodes by arranging the order of the table rows before generating the FormKit nodes.
For each row in the table, select the input type for the FormKit node. Change the label text if needed. Adding any text for the help text will generate the help property on the node. Leave it blank if you don't want help text on the node.
The "Req" checkbox makes the node a required field.
The "Label" checkbox will add or remove the label property from the FormKit node.
Sample data formats include:
Comma Separated Values
Field1, Field2, Field3, Field4
C# Class File
public string CustomerId { get; set; }
public string CustomerCommon { get; set; }
public string CustomerAddress { get; set; }
public string CustomerCity { get; set; }
public string CustomerState { get; set; }
public string CustomerZip { get; set; }
public string CustomerEmail { get; set; }
Javascript Objects
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
// or
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
Javascript Class Constructors
this.name = name;
this.surname = surname;
A Java Class constructor
gear = startGear;
cadence = startCadence;
speed = startSpeed;
The "No Build" option changes the generated Formkit node start and end tag(s) from <FormKit /> to <form-kit></form-kit>
Once the FormKit nodes are generated, simply copy/paste the generated nodes into VSCode and wire them up.
Note: If the input type for a node is not selected, nothing will be generated for that table row.
Note: If you only have one field to generate, just type it in and add a comma after it (e.g. Field1,).
Note: No user input is saved in any way.
Designed with by Xiaoying Riley for developers