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
variant
"outline" | "none"
config.default.variant
modelValue
string | number
""
inputClass
string
null
autofocusDelay
number
100
loadingIcon
string
config.default.loadingIcon
leadingIcon
string
null
trailingIcon
string
null
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"  }}