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

// Basic usage
import { Input } from 'vuiii'

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

More Examples

// Different input types (passed via attrs)
<Input v-model="email" type="email" placeholder="Email" />
<Input v-model="password" type="password" placeholder="Password" />
<Input v-model="count" type="number" placeholder="Count" />

// With icons
<Input v-model="search" prefixIcon="magnifying-glass" placeholder="Search..." />
<Input v-model="email" suffixIcon="envelope" placeholder="Email" />

// With clickable icons (emits events)
<Input
  v-model="password"
  :suffix-icon="showPassword ? 'eye-slash' : 'eye'"
  :type="showPassword ? 'text' : 'password'"
  @suffix-icon-click="showPassword = !showPassword"
/>

Storybook

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