Input

Input with floating label and error shake animation, suitable for most text input scenarios.

Basic Usage

Username

<AInput v-model="value" label="Username" placeholder="Enter username" />

Error State

On error, the input triggers a horizontal shake animation (spring easing) and shows the error message.

Email

<AInput
  v-model="value"
  label="Email"
  :error="hasError"
  error-message="Invalid email format"
/>

Disabled

Disabled

<AInput model-value="Locked" disabled />

API

Props

Name	Type	Default	Description
modelValue	string	''	Bound value
type	'text' | 'password' | 'email' | 'number' | 'search'	'text'	Native type
placeholder	string	—	Placeholder text
label	string	—	Floating label text
disabled	boolean	false	Disabled
readonly	boolean	false	Read-only
error	boolean	false	Error state
errorMessage	string	—	Error message text

Emits

Name	Parameters	Description
update:modelValue	string	Value updated
focus	FocusEvent	Input focused
blur	FocusEvent	Input blurred

Exposed Methods

Name	Description
focus()	Focus the input