Vue Input - Argon

The ArgonInput helps you to create different form elements.

Demo

1<template>
2  <argon-input placeholder="Type here..." />
3</template>
4
5<script>
6import ArgonInput from "@/components/ArgonInput.vue";
7export default {
8  components: {
9    ArgonInput,
10    },
11 };
12</script>

<template>
  <argon-input placeholder="Type here..." />
</template>

<script>
import ArgonInput from "@/components/ArgonInput.vue";
export default {
  components: {
    ArgonInput,
    },
 };
</script>

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

1<template>
2 <argon-input
3  placeholder="Type here..."
4  icon="ni ni-check-bold"
5  iconDir="left" />
6
7  <argon-input
8   placeholder="Type here..."
9   icon="ni ni-check-bold"
10   iconDir="right" />
11</template>
12
13<script>
14import ArgonInput from "@/components/ArgonInput.vue";
15export default {
16  components: {
17   ArgonInput,
18   },
19 };
20</script>

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

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

<script>
import ArgonInput from "@/components/ArgonInput.vue";
export default {
  components: {
   ArgonInput,
   },
 };
</script>

Success/Error

1<template>
2  <argon-input placeholder="Type here..." success />
3  <argon-input placeholder="Type here..." error />
4</template>
5
6<script>
7import ArgonInput from "@/components/ArgonInput.vue";
8export default {
9  components: {
10   ArgonInput,
11   },
12 };
13</script>

<template>
  <argon-input placeholder="Type here..." success />
  <argon-input placeholder="Type here..." error />
</template>

<script>
import ArgonInput from "@/components/ArgonInput.vue";
export default {
  components: {
   ArgonInput,
   },
 };
</script>

Sizes

1<template>
2  <argon-input placeholder="Type here..." size="sm" />
3  <argon-input placeholder="Type here..." size="md" />
4  <argon-input placeholder="Type here..." size="lg" />
5</template>
6
7<script>
8import ArgonInput from "@/components/ArgonInput.vue";
9export default {
10  components: {
11   ArgonInput,
12   },
13 };
14</script>

<template>
  <argon-input placeholder="Type here..." size="sm" />
  <argon-input placeholder="Type here..." size="md" />
  <argon-input placeholder="Type here..." size="lg" />
</template>

<script>
import ArgonInput from "@/components/ArgonInput.vue";
export default {
  components: {
   ArgonInput,
   },
 };
</script>

HTML5 Inputs

1<template>
2  <argon-input type="text" placeholder="Text" value="John Smith" />
3  <argon-input type="search" placeholder="Search" value="Creative Tim" />
4  <argon-input type="email" placeholder="Email" value="[email protected]" />
5  <argon-input type="url" placeholder="URL" value="www.creative-tim.com" />
6  <argon-input type="tel" placeholder="Phone" value="40-(770)-888-444" />
7  <argon-input type="password" placeholder="Password" value="password" />
8  <argon-input type="number" placeholder="Number" value="123456789" />
9  <argon-input type="datetime" placeholder="Date time" value="2018-11-23T10:30:00" />
10  <argon-input type="date" placeholder="Date" value="2018-11-23" />
11  <argon-input type="month" placeholder="Month" value="2018-11" />
12  <argon-input type="week" placeholder="Week" value="2018-W23" />
13  <argon-input type="time" placeholder="Time" value="10:30:00" />
14  <argon-input type="color" placeholder="Color" value="#17c1e8" />
15</template>
16
17<script>
18import ArgonInput from "@/components/ArgonInput.vue";
19export default {
20  components: {
21   ArgonInput,
22   },
23 };
24</script>

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

<script>
import ArgonInput from "@/components/ArgonInput.vue";
export default {
  components: {
   ArgonInput,
   },
 };
</script>