Nuxt•4w ago

UInput

Is there a way to override the text value inside of a <UInput> with generated elements?

3 Replies

Hi @mrskiii. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, there is a way to override the text value inside a <UInput> component with generated elements in Nuxt UI. You can achieve this by using the #default slot of the <UInput> component. According to the Input documentation (https://ui.nuxt.com/components/input#slots), the <UInput> component provides several slots, including a #default slot that allows you to customize the content inside the input field. Here's an example of how you can use the #default slot to override the text value with custom content:

<template>
  <UInput v-model="value">
    <template #default>
      <!-- Your custom content here -->
      <span>Custom text</span>
      <UIcon name="i-heroicons-user" />
    </template>
  </UInput>
</template>

<script setup>
const value = ref('')
</script>

<template>
  <UInput v-model="value">
    <template #default>
      <!-- Your custom content here -->
      <span>Custom text</span>
      <UIcon name="i-heroicons-user" />
    </template>
  </UInput>
</template>

<script setup>
const value = ref('')
</script>

In this example, instead of displaying the text value, the input will show the custom content you've placed inside the #default slot. You can include any valid HTML or Vue components within this slot to create your desired layout. Keep in mind that when using the #default slot, you're responsible for managing the input's value and any interactions, as you're essentially replacing the default input behavior. Input documentation (https://ui.nuxt.com/components/input) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

mrskiiiOP•4w ago

This does not work, it just displays the text below the input

Gaming

Programming

UInput

Did you find this page helpful?