Nuxt UI v4 is officially released!

Components

Input

GitHub
Display an input field.

Usage

Use a v-model to make the Input reactive.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Style

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Gray

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Size

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Type

Use the type prop to change the input type, the default type is set to text, you can check all the available types at MDN.

Some types have been implemented in their own components, such as Checkbox, Radio, etc. and others have been styled like file for example.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Placeholder

Use the placeholder prop to set a placeholder text.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Disabled

Use the disabled prop to disable the Input.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Loading

Use the loading prop to show a loading icon in 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.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Padded

Use the padded prop to remove the padding of the Input.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Limit

Use the maxlength prop to limit the length of the Input.

0/10
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

leading

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

trailing

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

EUR
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

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

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
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
type
string
"text"
size
InputSize
null
"md""2xs""xs""sm""lg""xl"
color
InputColor
config.default.color
"primary""white""gray""red""orange""amber""yellow""lime""green""emerald""teal""cyan""sky""blue""indigo""violet""purple""fuchsia""pink""rose"
icon
string
null
ui
{ wrapper?: string; base?: string; form?: string; rounded?: string; placeholder?: string; file?: DeepPartial<{ base: string; }, any>; size?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; gap?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; padding?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; leading?: DeepPartial<{ padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }, any>; trailing?: DeepPartial<{ padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }, any>; color?: DeepPartial<{ white: { outline: string; }; gray: { outline: string; }; }, any>; variant?: DeepPartial<{ outline: string; none: string; }, any>; icon?: DeepPartial<{ base: string; color: string; loading: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; leading: { wrapper: string; pointer: string; padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }; trailing: { wrapper: string; pointer: string; padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }; }, any>; default?: DeepPartial<{ size: string; color: string; variant: string; loadingIcon: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
id
string
null
modelValue
string | number
""
inputClass
string
null
variant
InputVariant
config.default.variant
"outline""none"
placeholder
string
null
autofocusDelay
number
100
loadingIcon
string
config.default.loadingIcon
leadingIcon
string
null
trailingIcon
string
null
modelModifiers
{ trim?: boolean; lazy?: boolean; number?: boolean; nullify?: boolean; }
{}
onBlur
(...args: any[]) => any
onChange
(...args: any[]) => any
onUpdate:modelValue
(...args: any[]) => any
required
boolean
false
disabled
boolean
false
leading
boolean
false
trailing
boolean
false
autofocus
boolean
false
loading
boolean
false
padded
boolean
true

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Icon

Add 200,000+ ready to use icons to your Nuxt application, based on Iconify.

InputMenu

Display an autocomplete input with real-time suggestions.