Input

Single-line text input field for user text entry.

Import

import { Input } from '@heroui-vue/vue'

Usage

Basic

<template>
  <div class="flex flex-col gap-3">
    <Input placeholder="Primary input" />
    <Input variant="secondary" placeholder="Secondary input" />
    <Input placeholder="Disabled" :disabled="true" />
  </div>
</template>

<script setup>
import { Input } from '@heroui-vue/vue'
</script>

Input Types

<template>
  <div class="flex flex-col gap-3">
    <Input type="text" placeholder="Text input" />
    <Input type="email" placeholder="Email input" />
    <Input type="password" placeholder="Password input" />
    <Input type="number" placeholder="Number input" />
  </div>
</template>

<script setup>
import { Input } from '@heroui-vue/vue'
</script>

Disabled & Full Width

<template>
  <div class="flex flex-col gap-3">
    <Input placeholder="Disabled input" :disabled="true" />
    <Input placeholder="Full width" :full-width="true" />
  </div>
</template>

<script setup>
import { Input } from '@heroui-vue/vue'
</script>

API

Props

Prop	Type	Default	Description
type	string	'text'	HTML input type
placeholder	string	undefined	Placeholder text
disabled	boolean	false	Whether the input is disabled
readonly	boolean	false	Whether the input is read-only
required	boolean	false	Whether the input is required
modelValue	string	undefined	v-model value

Events

Event	Payload	Description
update:modelValue	string	Emitted when input value changes
input	InputEvent	Native input event
change	Event	Native change event
focus	FocusEvent	Emitted when input receives focus
blur	FocusEvent	Emitted when input loses focus

Accessibility

• Proper label association with id and for attributes
• Keyboard navigation support
• Screen reader friendly
• Focus visible indicator