Describe the feature

Just like we had with vue-formulate, I think we need a way to specify option groups for select options.

Given formkit aims to have a shared API between input types, perhaps we could look into adding a group key to each of our options so we don't have to change the options prop for optionGroups. The value of group could be stringified to use as the group label inside the browser's optgroup or replaced by the matching label from one of the provided optionGroups.

This would allow to render those options grouped when using a select but at the same time re-use the props if we change that input for a different type that also supports options (eg. checkbox or radio).

Simple config example:

const schema = [
  {
    $formkit: 'select',
    name: 'genre',
    label: 'Genre',
    options: [
      { id: 28, name: 'Action', group: 'movie' },
      // NOTE: More options with movie genres
      { id: 10759, name: 'Action & Adventure', group: 'tv' },
      // NOTE: More options with tv show genres
    ],
  },
]

Complex config example:

const schema = [
  {
    $formkit: 'select',
    name: 'genre',
    label: 'Genre',
    options: [
      { id: 28, name: 'Action', group: 'movie' },
      // NOTE: More options with movie genres
      { id: 10759, name: 'Action & Adventure', group: 'tv' },
      // NOTE: More options with tv show genres
    ],
    optionGroups: [
      { label: 'Movie', value: 'movie' },
      { label: 'TV', value: 'tv' },
    ],
  },
]

Does this make sense? I can try to explain more but I don't think I care as much about the API as I do about having support for it in some kind of way. You probably know better how we should implement this.

Let me know if there's anything I can do to help 💖