VsudInput

The VsudInput helps you to create different form elements.

Demo

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

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

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

Props Information

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

With Icon

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

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

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

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

Success/Error

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

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

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

Sizes

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

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

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

HTML5 Inputs

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

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

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