A combobox used within a form

<!--
  Оригинал вызывает `toast(...)` из `sonner` при сабмите формы — пакет не
  входит в зависимости воркспейса (тот же класс ограничения, что и в
  `block-input-group`, см. `c-input-group-11.vue`) и не влияет на статичный
  скриншот, поэтому обработчик submit не переносит вызов toast.
-->
<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox"
import { Field, FieldLabel } from "@/components/ui/field"

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]

function handleSubmit(event: Event) {
  event.preventDefault()
}
</script>

<template>
  <form
    id="form-with-combobox"
    class="w-full max-w-xs space-y-4"
    @submit="handleSubmit"
  >
    <Field>
      <FieldLabel for="framework">Framework</FieldLabel>
      <Combobox>
        <ComboboxInput
          id="framework"
          name="framework"
          placeholder="Select a framework"
          required
        />
        <ComboboxContent>
          <ComboboxEmpty>No items found.</ComboboxEmpty>
          <ComboboxList>
            <ComboboxItem v-for="item in frameworks" :key="item" :value="item">
              {{ item }}
            </ComboboxItem>
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </Field>
    <Button type="submit" form="form-with-combobox" class="w-full">
      Submit
    </Button>
  </form>
</template>