vue-input-components

TextInput Component

A versatile text input component that supports various input types, validation, autosave, and custom styling.

Props

Prop	Type	Default	Description
modelValue	string	''	v-model binding for input value
type	'text' \| 'date' \| 'textarea' \| 'money'	'text'	Input type
placeholder	string	''	Placeholder text
label	string	''	Input label text
icon	string	undefined	Font Awesome icon name
disabled	boolean	false	Whether the input is disabled
readonly	boolean	false	Whether the input is readonly
required	boolean	false	Whether the input is required
maxlength	number	undefined	Maximum input length
error	string	''	Error message to display
min	Date	undefined	Minimum date (for date type)
max	Date	undefined	Maximum date (for date type)
labelPosition	'top' \| 'left'	'top'	Position of the label
labelAlign	'left' \| 'right' \| 'center'	'left'	Alignment of the label
labelWidth	string	''	Width of the label (for left position)
height	string	'5.5rem'	Height for textarea
maxHeight	string	'14rem'	Maximum height for textarea
bgColor	string	'var(--input-color, #ffffffee)'	Background color
width	string	'100%' (date: '10rem')	Width of the input
autosave	(value: string) => Promise<void>	undefined	Function to handle autosave

Events

Event	Parameters	Description
update:modelValue	(value: string)	Emitted when input value changes
changed	-	Emitted when input value changes
saved	-	Emitted when autosave completes
focus	-	Emitted when input receives focus
blur	-	Emitted when input loses focus
keydown	(event: KeyboardEvent)	Emitted on keydown event

Features

• Multiple input types (text, date, textarea)
• v-model support
• Icon support
• Label support with customizable position and alignment
• Placeholder text
• Disabled and readonly states
• Required field indicator
• Error handling and display
• Date picker integration
• Autosave functionality
• Status indicators (required, saved, changed, error)
• Customizable styling through CSS variables
• Responsive design
• Accessible by default

CSS Variables

The component uses the following CSS variables for styling:

:root {
  --text-input-color: var(--text-primary);
  --text-input-hover-color: var(--primary-color);
  --text-input-active-color: var(--primary-color);
  --text-input-disabled-color: var(--text-disabled);
  --text-input-background-color: var(--input-color, #ffffffaa);
  --text-dp-background-color: #ffffff;
  --text-input-border-radius: 0.5rem;
  --text-input-padding: 0.5rem;
  --max-textarea-height: 14rem;
  --textarea-height: 5.5rem;
}

Usage Examples

Basic Text Input

<template>
  <TextInput v-model="text" placeholder="Enter text..." />
</template>

Date Input

<template>
  <TextInput v-model="date" type="date" label="Select Date" :min="minDate" :max="maxDate" />
</template>

Textarea with Autosave

<template>
  <TextInput v-model="content" type="textarea" label="Description" :autosave="handleAutosave" />
</template>

Input with Icon and Error

<template>
  <TextInput
    v-model="email"
    placeholder="Enter email"
    icon="envelope"
    :error="emailError"
    required
  />
</template>