Nuxt•3mo ago

UFormField with UInputMenu errors

When using UInputMenu in a UFormField, I am getting the following errors in Chrome: - A form field element should have an id or name attribute (UInputMenu input has neither id nor a name attribute) - Incorrect use of <label for=FORM_ELEMENT> (UFormField label for) This is the code:

<UFormField label="Country" for="country_code" required>
        <UInputMenu
          id="country_code"
          name="country"
          :items="countries"
          :loading="status === 'pending'"
          label-key="name"
          value-key="code"
          :search-input="{ icon: 'i-lucide-search' }"
          placeholder="Select country"
          class="w-full"
          @update:open="onOpen"
        />
</UFormField>

<UFormField label="Country" for="country_code" required>
        <UInputMenu
          id="country_code"
          name="country"
          :items="countries"
          :loading="status === 'pending'"
          label-key="name"
          value-key="code"
          :search-input="{ icon: 'i-lucide-search' }"
          placeholder="Select country"
          class="w-full"
          @update:open="onOpen"
        />
</UFormField>

Have I missed anything here? Any help is appreciated!

11 Replies

kapa.ai•3mo ago

Hi @Ranma. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, your usage of UFormField with UInputMenu is mostly correct, and you are already setting both the id and name attributes on the UInputMenu. This should, in theory, address the accessibility warnings about missing id or name attributes and the label association. However, the official documentation for UFormField and UInputMenu does not explicitly mention the need to manually set the id or name on the input component, nor does it show examples where these are set directly. The documentation states that the label's for attribute and the form control are associated with a unique id if not provided, suggesting that the association should work automatically in most cases:

The label for attribute and the form control are associated with a unique id if not provided.
— UFormField documentation

If you are still seeing these errors: - Double-check that the UInputMenu component actually renders an <input> element with the id and name attributes you provide. If it does not, this may be a limitation or bug in the current version of Nuxt UI. - The documentation does not provide a direct example of using id or name with UInputMenu inside UFormField, nor does it mention a for prop on UFormField—only a name prop is documented for UFormField and UInputMenu UFormField API, UInputMenu Props. Summary:
You are not missing anything obvious according to the documentation. If the error persists, it may be due to how UInputMenu renders its internal input or how UFormField tries to associate the label. The knowledge sources do not provide enough detail about the internal implementation to give a definitive solution. You may want to check the rendered HTML to ensure the attributes are present, or consult the Nuxt UI GitHub issues for similar reports. If you need a workaround, you could try omitting the for attribute on UFormField and rely on the automatic association, or ensure that the id and name are correctly passed down to the actual input element rendered by UInputMenu (which may require checking the component source or opening an issue if it does not work as expected) UFormField documentation, UInputMenu documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@200321903448162305> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

RanmaOP•3mo ago

It seems that the id="country_code" is rendered on the outer <div> and not on the <input>

<div dir="ltr" id="country_code" class="relative inline-flex items-center w-full" style=""><!--[--><!--[--><!--[--><input value="" aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" aria-describedby="" aria-invalid="false" placeholder="Select country" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"><!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><!--[--><!--[--><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" style=""></span><!--]--><!--]--></button><!--]--><!--teleport start--><!--teleport end--><!--]--><!--]--><!--[--><!--]--></div>

<div dir="ltr" id="country_code" class="relative inline-flex items-center w-full" style=""><!--[--><!--[--><!--[--><input value="" aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" aria-describedby="" aria-invalid="false" placeholder="Select country" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9"><!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><!--[--><!--[--><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true" style=""></span><!--]--><!--]--></button><!--]--><!--teleport start--><!--teleport end--><!--]--><!--]--><!--[--><!--]--></div>

<input value="" aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" aria-describedby="" aria-invalid="false" placeholder="Select country" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">

<input value="" aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" aria-describedby="" aria-invalid="false" placeholder="Select country" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9">

@kapa.ai is this a bug?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the available knowledge sources, there is no explicit mention of this specific issue—using UInputMenu inside UFormField resulting in accessibility errors regarding missing id or name attributes, or incorrect label association. The documentation states that UFormField should automatically associate the label with the form control using a unique id if not provided, but it does not detail the behavior when using UInputMenu specifically or when manually setting id and name attributes UFormField documentation. Because the knowledge sources do not confirm whether this is expected behavior or a known bug, I cannot definitively state that it is a bug. If you are following the documented usage and still encountering these errors, it may be worth reporting as a potential bug to the Nuxt UI team, especially if the rendered HTML does not reflect the expected attributes Reporting Bugs. In summary:
I'm sorry, but the knowledge sources do not contain enough information to confirm whether this is a bug. If you believe your usage matches the documentation and the issue persists, consider reporting it to the maintainers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@200321903448162305> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

dwol•3mo ago

The label should be associated already, you do not need to use 'for'. Also, there is no 'for' prop on the FormField component https://ui.nuxt.com/components/form-field#props

Nuxt UI

Vue FormField Component - Nuxt UI

A wrapper for form elements that provides validation and error handling.

RanmaOP•3mo ago

@dwol yes, you are right, it works with <UInput>, but not correctly with <UInputMenu>. The id is set on the outer <div> and not on the input form element.

RanmaOP•3mo ago

Omnislash•3mo ago

I think there is a bug with UInputMenu right now, not sure if it's related to the issue you have, but you can even see it on the documentation right now. If you select it, the first time you have just one element, then the second time all of them. It caused zod validation error for me in the UForm. I just replaced it by USelect (or USelectMenu depending what you do) for the time being

Cake•3mo ago

its probably input-id? nvm thought this was a shadcn component

RanmaOP•3mo ago

The issue you described, sounds like it is because the items are lazy-loaded (loaded the first time you click the inputMenu). @Omnislash I just replaced the inputMenu with USelect. Now the errors I mentioned are gone. I guess it has something to do with the id's that are set on the wrong element. When I have more time, I will take a look at that. NuxtUI is built on top of Reka UI, so i think it should be related to shadcn-vue component as well... need some time to figure it out later, but thanks for the direction.

Gaming

Programming

UFormField with UInputMenu errors

Did you find this page helpful?