A combobox in an invalid state

<script setup lang="ts">
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
</script>

<template>
  <Field class="max-w-xs" data-invalid="true">
    <FieldLabel for="combobox-framework-invalid">Framework</FieldLabel>
    <Combobox>
      <ComboboxInput
        id="combobox-framework-invalid"
        placeholder="Select a framework"
        aria-invalid="true"
      />
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          <ComboboxItem v-for="item in frameworks" :key="item" :value="item">
            {{ item }}
          </ComboboxItem>
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
    <FieldError :errors="[{ message: 'This field is required.' }]" />
  </Field>
</template>