Style

const fields: IField[] = [
  {
    type: "input",
    name: "email",
    attributes: {
      type: "email",
      id: "email",
      classes: ["form-control"], // classes name for bootstrap
      placeholder: "Tap your email"
    },
    rules: ["required", "email"],
    messages: {
      required: "Custom message for required rule!"
    }
  },
  {
    type: "select",
    name: "name-field-select",
    attributes: {
      id: "id-field-select",
      classes: ["form-control"], // classes name for bootstrap
      label: "Label field select"
    },
    extra: {
      options: [
        {
          value: 1,
          title: "option 1"
        },
        {
          value: 2,
          title: "option 2"
        }
      ]
    }
  },
  {
    type: "radio",
    name: "name-field-radio",
    attributes: {
      id: "id-field-radio",
      classes: ["form-check-input"] // classes name for bootstrap
    },
    extra: {
      items: [
        {
          id: "radio1",
          value: 1,
          title: "radio 1"
        },
        {
          id: "radio2",
          value: 2,
          title: "radio 2"
        }
      ],
      aligne: "default"
    }
  }
]

const fields: IField[] = [
  {
    type: "input",
    name: "email",
    attributes: {
      type: "email",
      id: "email",
      classes: ["input px-4 py-3 rounded-full"], // classes name for bootstrap
      placeholder: "Tap your email"
    },
    rules: ["required", "email"],
    messages: {
      required: "Custom message for required rule!"
    }
  },
  {
    type: "select",
    name: "name-field-select",
    attributes: {
      id: "id-field-select",
      classes: ["input px-4 py-3 rounded-full"], // classes name for tailwindcss
      label: "Label field select"
    },
    extra: {
      options: [
        {
          value: 1,
          title: "option 1"
        },
        {
          value: 2,
          title: "option 2"
        }
      ]
    }
  },
  {
    type: "radio",
    name: "name-field-radio",
    attributes: {
      id: "id-field-radio",
      classes: ["rounded text-pink-500"] // classes name for tailwindcss
    },
    extra: {
      items: [
        {
          id: "radio1",
          value: 1,
          title: "radio 1"
        },
        {
          id: "radio2",
          value: 2,
          title: "radio 2"
        }
      ],
      aligne: "default"
    }
  }
]