Input

Displays a form input with a floating label, clean states and slots for leading or trailing icons.

Installation

npx alixan-ui-nuxt add input

This command installs only the base Input component with built-in validation props.

Usage

The label moves when the input is focused or has a value. Use v-model for two-way binding.

Name

<script setup lang="ts">
const value = ref('')
</script>

<template>
  <Input v-model="value" label="Name" />
</template>

State

Readonly

Disabled

Required

<script setup lang="ts">
const value = ref('readonly@example.com')
</script>

<template>
  <div class="grid w-full gap-3">
    <Input v-model="value" label="Readonly" readonly />
    <Input label="Disabled" disabled />
    <Input label="Required" error="Required field" />
 </div>
</template>

Validation

Username

<script setup lang="ts">
const value = ref('')
</script>

<template>
  <Input v-model="value" label="Username" required :min="3" :max="20" />
</template>

Length

Code

6-12 characters

<script setup lang="ts">
const value = ref('')
</script>

<template>
  <Input v-model="value" label="Code" :min="6" :max="12" hint="6-12 characters" />
</template>

With Icon

Password

<script setup lang="ts">
import { Eye, EyeOff, Lock, Mail } from '@lucide/vue'

const email = ref('')
const password = ref('')
const isPasswordVisible = ref(false)
</script>

<template>
  <div class="grid w-full gap-3">
    <EmailInput v-model="email">
      <template #leading>
        <Mail class="size-5" />
      </template>
    </EmailInput>

    <Input
      v-model="password"
      label="Password"
      :type="isPasswordVisible ? 'text' : 'password'"
    >
      <template #leading>
        <Lock class="size-5" />
      </template>
      <template #trailing>
        <IconButton
          variant="ghost"
          color="default"
          size="sm"
          @click="isPasswordVisible = !isPasswordVisible"
        >
          <EyeOff v-if="isPasswordVisible" />
          <Eye v-else />
        </IconButton>
      </template>
    </Input>
  </div>
</template>

Variants

Install focused wrappers when you want a dedicated component for a specific input pattern.

Username Input

npx alixan-ui-nuxt add username-input

Username

<script setup lang="ts">
const username = ref('')
</script>

<template>
  <UsernameInput v-model="username" />
</template>

Email Input

npx alixan-ui-nuxt add email-input

<script setup lang="ts">
const email = ref('')
</script>

<template>
  <EmailInput v-model="email" required />
</template>

Password Input

npx alixan-ui-nuxt add password-input

Password

<script setup lang="ts">
const password = ref('')
</script>

<template>
  <PasswordInput
    v-model="password"
    required
    :min="8"
    :max="32"
  />
</template>

Phone Input

npx alixan-ui-nuxt add phone-input

Default country code is +7. The input keeps it as a prefix and applies ### ### ## ## to the number.

<script setup lang="ts">
const phone = ref('')
</script>

<template>
  <PhoneInput
    v-model="phone"
    country-code="+7"
    placeholder="777 777 77 77"
  />
</template>

IIN

npx alixan-ui-nuxt add iin-input

IIN

<script setup lang="ts">
const iin = ref('')
</script>

<template>
  <IinInput v-model="iin" required />
</template>

API Reference

Prop	Type	Default	Description
modelValue	string \| number \| null	''	Input value used by v-model.
id	string	-	Custom id. Generated automatically when omitted.
label	string	-	Floating label text.
type	'text' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'number'	'text'	Native input type.
placeholder	string	-	Native placeholder text.
autocomplete	'on' \| 'off'	-	Controls the native browser autocomplete behavior.
autofocus	boolean	false	Focuses the input on mount.
required	boolean	false	Shows a localized required message after blur when the value is empty.
min	number	-	Minimum text length validation shown after blur.
max	number	-	Maximum text length validation shown after blur.
pattern	string	-	Native pattern string. The value must match the whole pattern after blur.
patternMessage	string	'Некорректный формат'	Validation message shown when pattern does not match.
mask	string	-	Digit mask where # is a digit.
hint	string	-	Helper text shown below the input.
error	string	-	Error message. Also switches the input into destructive state.
disabled	boolean	false	Disables input interaction.
readonly	boolean	false	Makes the input readable but not editable.
hasClearButton	boolean	true	Shows a clear button when the input has a value and no trailing slot.