Nuxt Input - Argon

The ArgonInput helps you to create different form elements.

Demo

<template>
 <ArgonInput placeholder="Type here..." />
</template>

1<template>
2 <ArgonInput placeholder="Type here..." />
3</template>

Props Information

Name	Type	Default	Description
id	String		Used to add id to the `ArgonInput` component.
type	String	text	Used to set the `type` for the `ArgonInput` component.
placeholder	String		Used to set placeholder to `ArgonInput` component.
value	String		Used to set the `value` for the `ArgonInput` value attribute.
name	String		Used to add value to the `ArgonInput` name attribute.
size	'default', 'sm''md''lg'	default	Change the `ArgonInput` size.
icon	string		Used to set an icon on the `ArgonInput`.
iconDir	["left", "right"]	none	Used to set the icon direction to the left or right side of `ArgonInput`
error	bool	false	Change the `ArgonInput` border color to red, its useful when displaying the error messages.
success	bool	false	Change the `ArgonInput` border color to green, its useful when displaying the success messages.
isRequired	bool	false	Used to make the `ArgonInput` required. use it.
HTML5 Attributes			You can also use HTML5 input attributes for the`ArgonInput`.

With Icon

<template>
 <ArgonInput
  placeholder="Type here..."
  icon="ni ni-check-bold"
  iconDir="left" />

 <ArgonInput
  placeholder="Type here..."
  icon="ni ni-check-bold"
  iconDir="right" />
</template>

1<template>
2 <ArgonInput
3  placeholder="Type here..."
4  icon="ni ni-check-bold"
5  iconDir="left" />
6
7 <ArgonInput
8  placeholder="Type here..."
9  icon="ni ni-check-bold"
10  iconDir="right" />
11</template>

Success/Error

<template>
 <ArgonInput placeholder="Type here..." success />
 <ArgonInput placeholder="Type here..." error />
</template>

1<template>
2 <ArgonInput placeholder="Type here..." success />
3 <ArgonInput placeholder="Type here..." error />
4</template>

Sizes

<template>
 <ArgonInput placeholder="Type here..." size="sm" />
 <ArgonInput placeholder="Type here..." size="md" />
 <ArgonInput placeholder="Type here..." size="lg" />
</template>

1<template>
2 <ArgonInput placeholder="Type here..." size="sm" />
3 <ArgonInput placeholder="Type here..." size="md" />
4 <ArgonInput placeholder="Type here..." size="lg" />
5</template>

HTML5 Inputs

<template>
 <ArgonInput type="text" placeholder="Text" value="John Smith" />
 <ArgonInput type="search" placeholder="Search" value="Creative Tim" />
 <ArgonInput type="email" placeholder="Email" value="someone@example.com" />
 <ArgonInput type="url" placeholder="URL" value="www.creative-tim.com" />
 <ArgonInput type="tel" placeholder="Phone" value="40-(770)-888-444" />
 <ArgonInput type="password" placeholder="Password" value="password" />
 <ArgonInput type="number" placeholder="Number" value="123456789" />
 <ArgonInput type="datetime" placeholder="Date time" value="2018-11-23T10:30:00" />
 <ArgonInput type="date" placeholder="Date" value="2018-11-23" />
 <ArgonInput type="month" placeholder="Month" value="2018-11" />
 <ArgonInput type="week" placeholder="Week" value="2018-W23" />
 <ArgonInput type="time" placeholder="Time" value="10:30:00" />
 <ArgonInput type="color" placeholder="Color" value="#17c1e8" />
</template>

1<template>
2 <ArgonInput type="text" placeholder="Text" value="John Smith" />
3 <ArgonInput type="search" placeholder="Search" value="Creative Tim" />
4 <ArgonInput type="email" placeholder="Email" value="[email protected]" />
5 <ArgonInput type="url" placeholder="URL" value="www.creative-tim.com" />
6 <ArgonInput type="tel" placeholder="Phone" value="40-(770)-888-444" />
7 <ArgonInput type="password" placeholder="Password" value="password" />
8 <ArgonInput type="number" placeholder="Number" value="123456789" />
9 <ArgonInput type="datetime" placeholder="Date time" value="2018-11-23T10:30:00" />
10 <ArgonInput type="date" placeholder="Date" value="2018-11-23" />
11 <ArgonInput type="month" placeholder="Month" value="2018-11" />
12 <ArgonInput type="week" placeholder="Week" value="2018-W23" />
13 <ArgonInput type="time" placeholder="Time" value="10:30:00" />
14 <ArgonInput type="color" placeholder="Color" value="#17c1e8" />
15</template>