Input

A single-line text field for entering a value.

<template>
  <Input placeholder="Hello world" />
</template>

Props

Name	Type	Default
size	"md" \| "sm"	"md"
error	boolean	false
...props	UInput props (type, placeholder, modelValue, disabled, icon, leadingIcon, trailingIcon, color, variant, ...)	—

Usage

Examples

Leading and trailing icons

#trailing is a real forwarded slot (not just a static icon), so it can hold an interactive control like this clear button, shown only once there's text to clear. Input's own leading/trailing icon size is fixed at size-4 regardless of its own size prop, matching IconButton's scale — the same at both sizes here, no per-instance override needed.

<template>
  <Input v-model="search" icon="i-lucide-search" placeholder="Search">
    <template v-if="search" #trailing>
      <IconButton icon="i-lucide-x" variant="plain" size="sm" aria-label="Clear search" @click="search = ''" />
    </template>
  </Input>
  
  <Input v-model="searchSm" size="sm" icon="i-lucide-search" placeholder="Search">
    <template v-if="searchSm" #trailing>
      <IconButton icon="i-lucide-x" variant="plain" size="sm" aria-label="Clear search" @click="searchSm = ''" />
    </template>
  </Input>
</template>

LabeledInput

A labeled form field: a title, an input, and an optional caption below it.

With description

This is your public display name.

With action

<template>
  <LabeledInput
    label="Email"
    description="This is your public display name."
    placeholder="Hello world"
  />
</template>

Props

Name	Type	Default
label	string	—
description	string	—
...props	Input props (placeholder, modelValue, size, error, ...)	—

Slots

Name	Description
leftIcon	Icon before the label text. Figma models this as a labelLeftIcon boolean; adapted to a slot to match Button/Badge's existing icon-slot pattern.
rightIcon	Icon after the label text.
actions	Optional trailing element next to the input, e.g. a Subscribe button — sits at its natural width while the input flexes to fill the rest.