Vue Input - Argon

The ArgonInput helps you to create different form elements.


Demo

Props Information

NameTypeDefaultDescription
idStringUsed to add id to the ArgonInput component.
typeStringtextUsed to set the type for the ArgonInput component.
placeholderStringUsed to set placeholder to ArgonInput component.
valueStringUsed to set the value for the ArgonInput value attribute.
nameStringUsed to add value to the ArgonInput name attribute.
size'default', 'sm''md''lg'defaultChange the ArgonInput size.
iconstringUsed to set an icon on the ArgonInput.
iconDir["left", "right"]noneUsed to set the icon direction to the left or right side of ArgonInput
errorboolfalseChange the ArgonInput border color to red, its useful when displaying the error messages.
successboolfalseChange the ArgonInput border color to green, its useful when displaying the success messages.
isRequiredboolfalseUsed to make the ArgonInput required. use it.
HTML5 AttributesYou can also use HTML5 input attributes for theArgonInput.

With Icon

Success/Error

Sizes

HTML5 Inputs