Vue Input - Material

The MaterialInput helps you to create different form elements.

Demo

<template>
  <material-input id="text" placeholder="Type here..." />
</template>

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

1<template>
2  <material-input id="text" placeholder="Type here..." />
3</template>
4
5<script>
6import MaterialInput from "@/components/MaterialInput.vue";
7export default { components: { MaterialInput } };
8</script>

Props Information

Name	Type	Default	Description
id*	String		Used to add id to the `MaterialInput` component. It is a required prop.
type	String	text	Used to set the `type` for the `MaterialInput` component.
placeholder	String		Used to set placeholder to `MaterialInput` component.
value	String		Used to set the `value` for the `MaterialInput` value attribute.
name	String		Used to add value to the `MaterialInput` name attribute.
size	'default', 'sm''md''lg'	default	Change the `MaterialInput` size.
error	bool	false	Change the `MaterialInput` border color to red, its useful when displaying the error messages.
success	bool	false	Change the `MaterialInput` border color to green, its useful when displaying the success messages.
disabled	bool	false	Used to disable the `MaterialInput`.
isRequired	bool	false	Used to make the `MaterialInput` required. use it.
HTML5 Attributes			You can also use HTML5 input attributes for the`MaterialInput`.

Success/Error

<template>
  <material-input id="email" type="email" value="someone@example.com" success />
  <material-input id="email" type="email" value="someone.com" error />
</template>

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

1<template>
2  <material-input id="email" type="email" value="[email protected]" success />
3  <material-input id="email" type="email" value="someone.com" error />
4</template>
5
6<script>
7import MaterialInput from "@/components/MaterialInput.vue";
8export default { components: { MaterialInput } };
9</script>

Sizes

<template>
  <material-input id="text" placeholder="Type here..." size="sm" />
  <material-input id="text1" placeholder="Type here..." size="md" />
  <material-input id="text2" placeholder="Type here..." size="lg" />
</template>

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

1<template>
2  <material-input id="text" placeholder="Type here..." size="sm" />
3  <material-input id="text1" placeholder="Type here..." size="md" />
4  <material-input id="text2" placeholder="Type here..." size="lg" />
5</template>
6
7<script>
8import MaterialInput from "@/components/MaterialInput.vue";
9export default { components: { MaterialInput } };
10</script>

HTML5 Inputs

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

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

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