Vue Input - Material

The MaterialInput helps you to create different form elements.

Demo

<script setup>
// Vue Material Kit 2 component
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
  <MaterialInput type="text" placeholder="eg. Thomas Shelby" />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialInput from "@/components/MaterialInput.vue";
4</script>
5<template>
6  <MaterialInput type="text" placeholder="eg. Thomas Shelby" />
7</template>

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.
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.
inputClass	string		Used to add icon to the `MaterialInput`.
icon	string		Used to add custom class for the `MaterialInput`'s Input.
HTML5 Attributes			You can also use HTML5 input attributes for the`MaterialInput`.

Input Static

First Name

<script setup>
// Vue Material Kit 2 component
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
 <MaterialInput
   class="input-group-static"
   label="First Name"
   type="text"
   placeholder="eg. Thomas Shelby"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialInput from "@/components/MaterialInput.vue";
4</script>
5<template>
6 <MaterialInput
7   class="input-group-static"
8   label="First Name"
9   type="text"
10   placeholder="eg. Thomas Shelby"
11 />
12</template>

Input Dynamic

Regular

<script setup>
// Vue Material Kit 2 component
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
 <MaterialInput
   class="input-group-dynamic"
   :label="{ text: 'Regular', class: 'form-label' }"
   type="text"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialInput from "@/components/MaterialInput.vue";
4</script>
5<template>
6 <MaterialInput
7   class="input-group-dynamic"
8   :label="{ text: 'Regular', class: 'form-label' }"
9   type="text"
10 />
11</template>

Input Outline

Outline

<script setup>
// Vue Material Kit 2 component
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
 <MaterialInput
   class="input-group-outline"
   :label="{ text: 'Outline', class: 'form-label' }"
   type="text"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialInput from "@/components/MaterialInput.vue";
4</script>
5<template>
6 <MaterialInput
7   class="input-group-outline"
8   :label="{ text: 'Outline', class: 'form-label' }"
9   type="text"
10 />
11</template>

Input with Icon

<script setup>
// Vue Material Kit 2 component
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
 <MaterialInput
   class="input-group-dynamic "
   icon="search"
   type="text"
   placeholder="Search"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialInput from "@/components/MaterialInput.vue";
4</script>
5<template>
6 <MaterialInput
7   class="input-group-dynamic "
8   icon="search"
9   type="text"
10   placeholder="Search"
11 />
12</template>

Success/Error

<script setup>
// Vue Material Kit 2 component
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
  <MaterialInput type="text" placeholder="Success" success />
  <MaterialInput type="text" placeholder="Error" error />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialInput from "@/components/MaterialInput.vue";
4</script>
5<template>
6  <MaterialInput type="text" placeholder="Success" success />
7  <MaterialInput type="text" placeholder="Error" error />
8</template>

Sizes

<script setup>
// Vue Material Kit 2 component
import MaterialInput from "@/components/MaterialInput.vue";
</script>
<template>
  <MaterialInput class="input-group-outline" placeholder="Type here..." size="sm" />
  <MaterialInput class="input-group-outline" placeholder="Type here..." size="md" />
  <MaterialInput class="input-group-outline" placeholder="Type here..." size="lg" />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialInput from "@/components/MaterialInput.vue";
4</script>
5<template>
6  <MaterialInput class="input-group-outline" placeholder="Type here..." size="sm" />
7  <MaterialInput class="input-group-outline" placeholder="Type here..." size="md" />
8  <MaterialInput class="input-group-outline" placeholder="Type here..." size="lg" />
9</template>