ui/docs/content/3.forms/1.input.md

description, links

description	links
Display an input field.	label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Input.vue

Usage

Use a v-model to make the Input reactive.

::component-example #default :input-example

#code

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

<template>
  <UInput v-model="value" />
</template>

::

Style

Use the color and variant props to change the visual style of the Input.

::component-card

baseProps: name: 'input' placeholder: 'Search...' props: color: 'primary' variant: 'outline'

::

Besides all the colors from the ui.colors object, you can also use the white (default) and gray colors with their pre-defined variants.

White

::component-card

baseProps: name: 'input' placeholder: 'Search...' props: color: 'white' variant: 'outline' excludedProps:

• color

---

::

Gray

::component-card

baseProps: name: 'input' placeholder: 'Search...' props: color: 'gray' variant: 'outline' excludedProps:

• color

---

::

Size

Use the size prop to change the size of the Input.

::component-card

baseProps: name: 'input' props: size: 'sm'

::

Placeholder

Use the placeholder prop to set a placeholder text.

::component-card

baseProps: name: 'input' props: placeholder: 'Search...'

::

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.

Use the leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.

::component-card

baseProps: name: 'input' placeholder: 'Search...' props: icon: 'i-heroicons-magnifying-glass-20-solid' size: 'sm' color: 'white' trailing: false extraColors:

• white
• gray excludedProps:
• icon

---

::

Disabled

Use the disabled prop to disable the Input.

::component-card

baseProps: name: 'input' placeholder: 'Search...' props: disabled: true

::

Loading

Use the loading prop to show a loading icon and disable the Input.

Use the loading-icon prop to set a different icon or change it globally in ui.input.default.loadingIcon. Defaults to i-heroicons-arrow-path-20-solid.

::component-card

baseProps: name: 'input' placeholder: 'Searching...' props: loading: true icon: 'i-heroicons-magnifying-glass-20-solid' excludedProps:

• icon

---

::

Slots

leading

Use the #leading slot to set the content of the leading icon.

::component-card

slots: leading: baseProps: name: 'input' placeholder: 'Search...'

#leading :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"} ::

trailing

Use the #trailing slot to set the content of the trailing icon.

::component-card

slots: trailing: EUR baseProps: name: 'input' placeholder: 'Search...'

#trailing [EUR]{class="text-gray-500 dark:text-gray-400 text-xs"} ::

You can for example create a clearable Input by injecting a Button in the trailing slot that displays when some text is entered.

::component-example #default :input-example-clearable

#code

<template>
  <UInput v-model="q" name="q" placeholder="Search..." icon="i-heroicons-magnifying-glass-20-solid" :ui="{ icon: { trailing: { pointer: '' } } }">
    <template #trailing>
      <UButton
        v-show="q !== ''"
        color="gray"
        variant="link"
        icon="i-heroicons-x-mark-20-solid"
        :padded="false"
        @click="q = ''"
      />
    </template>
  </UInput>
</template>

<script setup lang="ts">
const q = ref('')
</script>

::

::callout{icon="i-heroicons-exclamation-triangle-20-solid"} As leading and trailing icons are wrapped around a pointer-events-none class, if you inject a clickable element in the slot, you need to remove this class to make it clickable by adding :ui="{ icon: { trailing: { pointer: '' } } }" to the Input. ::

Props

:component-props

Preset

:component-preset