forms

Input

Display an input field.

Usage

Use a v-model to make the Input reactive.

<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.

<UInput  color="primary"  variant="outline"  name="input"  placeholder="Search..."/>

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

<UInput color="white" variant="outline" name="input" placeholder="Search..." />

Gray

<UInput color="gray" variant="outline" name="input" placeholder="Search..." />

Size

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

<UInput size="sm" name="input" />

Placeholder

Use the placeholder prop to set a placeholder text.

<UInput placeholder="Search..." name="input" />

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.

<UInput  icon="i-heroicons-magnifying-glass-20-solid"  size="sm"  color="white"  :trailing="false"  name="input"  placeholder="Search..."/>

Disabled

Use the disabled prop to disable the Input.

<UInput disabled name="input" placeholder="Search..." />

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.

<UInput  loading  icon="i-heroicons-magnifying-glass-20-solid"  name="input"  placeholder="Searching..."/>

Slots

leading

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

<UInput name="input" placeholder="Search...">  <template #leading>    <UAvatar      src="https://avatars.githubusercontent.com/u/739984?v=4"      size="3xs"    />  </template></UInput>

trailing

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

EUR
<UInput name="input" placeholder="Search...">  <template #trailing>    <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>  </template></UInput>

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

<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>
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

name
string
null
size
"sm" | "2xs" | "xs" | "md" | "lg" | "xl"
null
ui
any
undefined
type
string
"text"
id
string
null
placeholder
string
null
icon
string
null
color
any
config.default.color
modelValue
string | number
""
inputClass
string
null
variant
"outline" | "none"
config.default.variant
autofocusDelay
number
100
loadingIcon
string
config.default.loadingIcon
leadingIcon
string
null
trailingIcon
string
null
modelModifiers
{}
{}
required
boolean
false
disabled
boolean
false
leading
boolean
false
trailing
boolean
false
autofocus
boolean
false
loading
boolean
false
padded
boolean
true

Preset

{  "wrapper": "relative",  "base": "relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0",  "rounded": "rounded-md",  "placeholder": "placeholder-gray-400 dark:placeholder-gray-500",  "size": {    "2xs": "text-xs",    "xs": "text-xs",    "sm": "text-sm",    "md": "text-sm",    "lg": "text-sm",    "xl": "text-base"  },  "gap": {    "2xs": "gap-x-1",    "xs": "gap-x-1.5",    "sm": "gap-x-1.5",    "md": "gap-x-2",    "lg": "gap-x-2.5",    "xl": "gap-x-2.5"  },  "padding": {    "2xs": "px-2 py-1",    "xs": "px-2.5 py-1.5",    "sm": "px-2.5 py-1.5",    "md": "px-3 py-2",    "lg": "px-3.5 py-2.5",    "xl": "px-3.5 py-2.5"  },  "leading": {    "padding": {      "2xs": "ps-7",      "xs": "ps-8",      "sm": "ps-9",      "md": "ps-10",      "lg": "ps-11",      "xl": "ps-12"    }  },  "trailing": {    "padding": {      "2xs": "pe-7",      "xs": "pe-8",      "sm": "pe-9",      "md": "pe-10",      "lg": "pe-11",      "xl": "pe-12"    }  },  "color": {    "white": {      "outline": "shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400"    },    "gray": {      "outline": "shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400"    }  },  "variant": {    "outline": "shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400",    "none": "bg-transparent focus:ring-0 focus:shadow-none"  },  "icon": {    "base": "flex-shrink-0 text-gray-400 dark:text-gray-500",    "color": "text-{color}-500 dark:text-{color}-400",    "size": {      "2xs": "h-4 w-4",      "xs": "h-4 w-4",      "sm": "h-5 w-5",      "md": "h-5 w-5",      "lg": "h-5 w-5",      "xl": "h-6 w-6"    },    "leading": {      "wrapper": "absolute inset-y-0 start-0 flex items-center",      "pointer": "pointer-events-none",      "padding": {        "2xs": "ps-2",        "xs": "ps-2.5",        "sm": "ps-2.5",        "md": "ps-3",        "lg": "ps-3.5",        "xl": "ps-3.5"      }    },    "trailing": {      "wrapper": "absolute inset-y-0 end-0 flex items-center",      "pointer": "pointer-events-none",      "padding": {        "2xs": "pe-2",        "xs": "pe-2.5",        "sm": "pe-2.5",        "md": "pe-3",        "lg": "pe-3.5",        "xl": "pe-3.5"      }    }  },  "default": {    "size": "sm",    "color": "white",    "variant": "outline",    "loadingIcon": "i-heroicons-arrow-path-20-solid"  }}