Input

Text input component with icon support, size variants, and validation states. Wraps native input with InputWrapper for consistent styling.

Import

import { Input } from 'vuiii'

Basic Usage

View in Storybook

<Input v-model="name" placeholder="Enter your name" />

Props

Prop	Type	Default	Description
modelValue	string | number | Date | null	-	Bound value (use with v-model)
prefixIcon	string	-	Icon name to show before the input
suffixIcon	string	-	Icon name to show after the input
prefixIconClickable	boolean	false	Renders the prefix icon as a focusable button
suffixIconClickable	boolean	false	Renders the suffix icon as a focusable button
prefixIconLabel	string	-	Accessible label for a clickable prefix icon
suffixIconLabel	string	-	Accessible label for a clickable suffix icon
size	'small' | 'normal' | 'large'	'normal'	Input size
invalid	boolean	false	Applies the invalid/error styling
pill	boolean	false	Rounded pill shape
disabled	boolean	false	Disables the input (native attribute)
placeholder	string	-	Placeholder text (native attribute)
type	string	'text'	Native input type (native attribute)
valueAsNumber	boolean	false	Emits the value as a number (for type="number")
valueAsDate	boolean	false	Emits the value as a Date (for type="date")
inputClass	any	-	Class applied to the nested <input> element

Slots

Slot	Description
prefix	Content before the input (replaces prefixIcon)
suffix	Content after the input (replaces suffixIcon)

Events

Event	Payload	Description
prefix-icon-click	-	When the prefix icon is clicked
suffix-icon-click	-	When the suffix icon is clicked

Input Types

type and the other native attributes pass straight through to the underlying <input>.

<Input v-model="email" type="email" placeholder="Email" />
<Input v-model="password" type="password" placeholder="Password" />
<Input v-model="count" type="number" placeholder="Count" />

Typed values

A native input always reports a string. valueAsNumber and valueAsDate make the model receive the parsed value instead, so you do not convert on every change.

<!-- count is a number -->
<Input v-model="count" type="number" value-as-number />

<!-- startsOn is a Date -->
<Input v-model="startsOn" type="date" value-as-date />

With Icons

<Input v-model="search" prefix-icon="search" placeholder="Search..." />
<Input v-model="email" suffix-icon="mail" placeholder="Email" />

Clickable Icons

Mark the icon suffix-icon-clickable (or prefix-icon-clickable) and it becomes a real, focusable button; without it the icon stays decorative and out of the tab order. Give it a label so it is announced.

<Input
  v-model="query"
  suffix-icon="x"
  suffix-icon-clickable
  suffix-icon-label="Clear"
  @suffix-icon-click="query = ''"
/>

Sizes and Validation State

<Input v-model="value" size="small" placeholder="Small" />
<Input v-model="value" :invalid="!!errors.value" placeholder="Invalid" />
<Input v-model="value" pill placeholder="Pill" />
<Input v-model="value" disabled placeholder="Disabled" />

To pair the invalid state with a label and an error message, wrap it in FormGroup — see Composing Forms.

Storybook

For interactive examples with all variants, see Input in Storybook.