FormKit Error: Unknown input type "dropdown"

[HydraCOREY]

Reproduction

https://formkit.com/playground?fkv=1.0.0-beta.12&fileTab=Playground.vue&files=JTVCJTdCJTIybmFtZSUyMiUzQSUyMlBsYXlncm91bmQudnVlJTIyJTJDJTIyZWRpdG9yJTIyJTNBJTIyJTNDc2NyaXB0JTIwc2V0dXAlM0UlNUNuY29uc3QlMjBmcmFtZXdvcmtzJTIwJTNEJTIwJTVCJTdCJTIwbGFiZWwlM0ElMjAnUmVhY3QnJTJDJTIwdmFsdWUlM0ElMjAncmVhY3QnJTJDJTIwYXNzZXQlM0ElMjAnaHR0cHMlM0ElMkYlMkZzMy5hbWF6b25hd3MuY29tJTJGY2RuLmZvcm1rLml0JTJGZXhhbXBsZS1hc3NldHMlMkZmcm9udGVuZC1mcmFtZXdvcmstbG9nb3MlMkZyZWFjdC1sb2dvLnBuZyclMjAlN0QlMkMlMjAlN0IlMjBsYWJlbCUzQSUyMCdWdWUnJTJDJTIwdmFsdWUlM0ElMjAndnVlJyUyQyUyMGFzc2V0JTNBJTIwJ2h0dHBzJTNBJTJGJTJGczMuYW1hem9uYXdzLmNvbSUyRmNkbi5mb3Jtay5pdCUyRmV4YW1wbGUtYXNzZXRzJTJGZnJvbnRlbmQtZnJhbWV3b3JrLWxvZ29zJTJGdnVlLWxvZ28ucG5nJyUyMCU3RCUyQyUyMCU3QiUyMGxhYmVsJTNBJTIwJ0FuZ3VsYXInJTJDJTIwdmFsdWUlM0ElMjAnYW5ndWxhciclMkMlMjBhc3NldCUzQSUyMCdodHRwcyUzQSUyRiUyRnMzLmFtYXpvbmF3cy5jb20lMkZjZG4uZm9ybWsuaXQlMkZleGFtcGxlLWFzc2V0cyUyRmZyb250ZW5kLWZyYW1ld29yay1sb2dvcyUyRmFuZ3VsYXItbG9nby5wbmcnJTIwJTdEJTJDJTIwJTdCJTIwbGFiZWwlM0ElMjAnU3ZlbHRlJyUyQyUyMHZhbHVlJTNBJTIwJ3N2ZWx0ZSclMkMlMjBhc3NldCUzQSUyMCdodHRwcyUzQSUyRiUyRnMzLmFtYXpvbmF3cy5jb20lMkZjZG4uZm9ybWsuaXQlMkZleGFtcGxlLWFzc2V0cyUyRmZyb250ZW5kLWZyYW1ld29yay1sb2dvcyUyRnN2ZWx0ZS1sb2dvLnBuZyclMjAlN0QlNUQlNUNuJTNDJTJGc2NyaXB0JTNFJTVDbiU1Q24lM0N0ZW1wbGF0ZSUzRSU1Q24lMjAlMjAlM0NGb3JtS2l0JTVDbiUyMCUyMCUyMCUyMHR5cGUlM0QlNUMlMjJmb3JtJTVDJTIyJTVDbiUyMCUyMCUyMCUyMCUyM2RlZmF1bHQlM0QlNUMlMjIlN0IlMjB2YWx1ZSUyMCU3RCU1QyUyMiU1Q24lMjAlMjAlMjAlMjAlM0FhY3Rpb25zJTNEJTVDJTIyZmFsc2UlNUMlMjIlNUNuJTIwJTIwJTNFJTVDbiUyMCUyMCUyMCUyMCUzQ0Zvcm1LaXQlNUNuJTIwJTIwJTIwJTIwJTIwJTIwdHlwZSUzRCU1QyUyMmRyb3Bkb3duJTVDJTIyJTVDbiUyMCUyMCUyMCUyMCUyMCUyMG5hbWUlM0QlNUMlMjJmcmFtZXdvcmslNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTIwJTIwb3V0ZXItY2xhc3MlM0QlNUMlMjJyZWxhdGl2ZSU1QyUyMiU1Q24lMjAlMjAlMjAlMjAlMjAlMjBsYWJlbC1jbGFzcyUzRCU1QyUyMmJsb2NrJTIwbWItMSUyMGZvbnQtbWVkaXVtJTIwdGV4dC1zbSUyMHNlbGVjdC1ub25lJTIwZm9ybWtpdC1pbnZhbGlkJTNBdGV4dC1yZWQtNTAwJTVDJTIyJTJDJTVDbiUyMCUyMGlubmVyLWNsYXNzJTNEJTVDJTIybWF4LXctbWQlMjBib3JkZXIlMjBib3JkZXItZ3JheS0zMDAlMjBzaGFkb3ctc20lMjByb3VuZGVkLXNtJTIwbWItMSUyMG92ZXJmbG93LWhpZGRlbiUyMGZvY3VzLXdpdGhpbiUzQWJvcmRlci1ibHVlLTUwMCUyMGZvcm1raXQtc3VibWl0dGVkJTNBZm9ybWtpdC1pbnZhbGlkJTNBYm9yZGVyLXJlZC01MDAlNUMlMjIlMkMlNUNuJTIwJTIwaW5wdXQtY2xhc3MlM0QlNUMlMjJ3LWZ1bGwlMjBweC0zJTIwYm9yZGVyLW5vbmUlMjB0ZXh0LWJhc2UlMjB0ZXh0LWdyYXktNzAwJTIwcGxhY2Vob2xkZXItZ3JheS00MDAlMjBmb2N1cyUzQW91dGxpbmUtbm9uZSUyMGZvY3VzJTNBcmluZy0wJTIwZm9ybWtpdC1tdWx0aXBsZSUzQWgtNDglNUMlMjIlMkMlNUNuJTIwJTIwJTIwJTIwJTIwJTIwbGFiZWwlM0QlNUMlMjJDaG9vc2UlMjBhJTIwZnJvbnRlbmQlMjBmcmFtZXdvcmslNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTIwJTIwcGxhY2Vob2xkZXIlM0QlNUMlMjJFeGFtcGxlJTIwcGxhY2Vob2xkZXIlNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTNBb3B0aW9ucyUzRCU1QyUyMmZyYW1ld29ya3MlNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTNFJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUzQyEtLU9QVElPTiUyMFNMT1QtLSUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlM0N0ZW1wbGF0ZSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBjbGFzcyUzRCU1QyUyMmFic29sdXRlJTIwdG9wLTAlNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIzb3B0aW9uJTNEJTVDJTIyJTdCJTIwb3B0aW9uJTIwJTdEJTVDJTIyJTNFJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTVDJTIyZmxleCUyMGl0ZW1zLWNlbnRlciU1QyUyMiUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NpbWclNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNBc3JjJTNEJTVDJTIyb3B0aW9uLmFzc2V0JTVDJTIyJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGFsdCUzRCU1QyUyMm9wdGlvbkF2YXRhciU1QyUyMiU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBjbGFzcyUzRCU1QyUyMmgtNSUyMHctNSUyMG0tMSU1QyUyMiU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMkYlM0UlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDc3BhbiUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0IlN0IlMjBvcHRpb24ubGFiZWwlMjAlN0QlN0QlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGc3BhbiUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGdGVtcGxhdGUlM0UlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTNDIS0tLS0lM0UlNUNuJTIwJTIwJTIwJTIwJTNDJTJGRm9ybUtpdCUzRSU1Q24lMjAlMjAlMjAlMjAlM0NwcmUlMjB3cmFwJTNFJTdCJTdCJTIwdmFsdWUlMjAlN0QlN0QlM0MlMkZwcmUlM0UlNUNuJTIwJTIwJTNDJTJGRm9ybUtpdCUzRSU1Q24lM0MlMkZ0ZW1wbGF0ZSUzRSU1Q24lNUNuJTNDc3R5bGUlM0UlNUNuLmZvcm1raXQtb3B0aW9uJTIwJTdCJTVDbiUyMCUyMGRpc3BsYXklM0ElMjBmbGV4JTNCJTVDbiUyMCUyMGFsaWduLWl0ZW1zJTNBJTIwY2VudGVyJTNCJTVDbiU3RCU1Q24uZm9ybWtpdC1vcHRpb24lMjBpbWclMjAlN0IlNUNuJTIwJTIwd2lkdGglM0ElMjAyMHB4JTNCJTVDbiUyMCUyMGhlaWdodCUzQSUyMDIwcHglM0IlNUNuJTIwJTIwbWFyZ2luLXJpZ2h0JTNBJTIwMTBweCUzQiU1Q24lN0QlNUNuJTNDJTJGc3R5bGUlM0UlNUNuJTIyJTJDJTIyYWRkZWQlMjIlM0F0cnVlJTdEJTVE&css-framework=tailwind&cssFramework=tailwind&imports=JTdCJTIybmFtZSUyMiUzQSUyMkltcG9ydE1hcCUyMiUyQyUyMmVkaXRvciUyMiUzQSUyMiU3QiU1Q24lMjAlMjAlNUMlMjJ2dWUlNUMlMjIlM0ElMjAlNUMlMjJodHRwcyUzQSUyRiUyRmNkbi5qc2RlbGl2ci5uZXQlMkZucG0lMkZ2dWUlNDAzJTJGZGlzdCUyRnZ1ZS5lc20tYnJvd3Nlci5taW4uanMlNUMlMjIlNUNuJTdEJTVDbiUyMiU3RA

Describe the bug

Using the console in the FormKit Playground you can see several errors that show up. In my local application, I get an endless error loop and the page never loads (*see local console errors below). Locally I have the code set up like so:

<FormKit
  v-model="myFormKitOption"
  outer-class="relative"
  label="Renewal Interval"
  type="dropdown"
  :options="[{ label: 'one', value: 'one' }]"
>
  <template
    #option="{ option }"
    class="absolute top-0"
  >
    <div class="flex items-center">
      <span>
        {{ option.label }}
      </span>
    </div>
  </template>
</FormKit>

const myFormKitOption = ref()

Environment

• OS: Windows 11 • Browser: any • Version: "vue": "^3.2.37", "@formkit/themes": "^1.0.0-beta.12", "@formkit/vue": "^1.0.0-beta.12",

[justin-schroeder]

You have commas at the end of your long class lists, which makes it not a valid Vue syntax:

If I remove them it works: https://formkit.link/27e08c02654b2a834480c97fca764dd4

Good luck 👍

[HydraCOREY]

@justin-schroeder That fixes the Playground error, I must have made those errors in my rush to get the example set up. I have a theme.js set up like so:

const textClassification = {
  label: "block mb-1 font-medium text-sm select-none formkit-invalid:text-red-500",
  inner:
    "max-w-md border border-gray-300 shadow-sm rounded-sm mb-1 overflow-hidden focus-within:border-blue-500 formkit-submitted:formkit-invalid:border-red-500",
  input: "w-full px-3 border-none text-base text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-0 formkit-multiple:h-48",
}

export default {
  global: {
    outer: "my-3 formkit-disabled:opacity-30",
    help: "text-xs text-gray-500",
    prefixIcon: "inline-block",
    suffixIcon: "inline-block",
    messages: "list-none p-0 mt-1 mb-3",
    message: "text-red-500 mb-1 text-xs",
  },
  "family:text": textClassification,
  // ... more code
}

But this doesn't fix my local errors since I don't have those commas in my local code. Seems like something wrong with the loop handling the :options.

[justin-schroeder]

Feel free to create another reproduction with your options/loop issue and I'll reopen this 👍

[KellsWorks]

Getting the same error. l don't think my situation is because of the vue syntax as mentioned above.

`<FormKit type="dropdown" :options="frameworks" label="Frameworks" validation="required"

`

Error: Uncaught (in promise) Error: Unknown input type "dropdown" ("dropdown_13")

[fenilli]

Dropdown is a PRO input, do you have pro installed correctly?