Easily create inputs with different statuses and sizes using our component based on Vue.js.
Input fields are an essential user interface design element, providing users with the means to enter non-standardized responses.
Find below several examples of input components that you can use to create your forms using Vue Soft UI Dashboard.
Default Example
Use this example to create a simple and versatile input.
1<template>
2 <soft-input placeholder="Type here..." />
3</template>
4
5<script>
6import SoftInput from "@/components/SoftInput.vue";
7export default { components: { SoftInput, }, };
8</script>
Props Information
| Name | Type | Default | Description |
|---|
| id | String | | Used to add id to the SoftInput component. |
| type | String | | Used to set the type for the SoftInput component. |
| placeholder | String | | Used to set placeholder to SoftInput component. |
| value | String | | Used to set the value for the SoftInput value attribute. |
| name | String | | Used to add value to the SoftInput name attribute. |
| size | 'sm''md''lg' | | Change the SoftInput size. |
| icon | string | | Used to set an icon on the SoftInput. |
| iconDir | ["left", "right"] | none | Used to set the icon direction to the left or right side of SoftInput |
| error | bool | false | Change the SoftInput border color to red, its useful when displaying the error messages. |
| success | bool | false | Change the SoftInput border color to green, its useful when displaying the success messages. |
| isRequired | bool | false | Used to make the SoftInput required. use it. |
| HTML5 Attributes | | | You can also use HTML5 input attributes for theSoftInput. |
Use the following example of input with icon that makes the action more explicit.
1<template>
2 <soft-input
3 placeholder="Type here..."
4 icon="ni ni-check-bold"
5 iconDir="left" />
6
7 <soft-input
8 placeholder="Type here..."
9 icon="ni ni-check-bold"
10 iconDir="right" />
11</template>
12
13<script>
14import SoftInput from "@/components/SoftInput.vue";
15export default { components: { SoftInput, }, };
16</script>
For a user-friendly experience, use this input example when creating your form.
1<template>
2 <soft-input placeholder="Type here..." success />
3 <soft-input placeholder="Type here..." error />
4</template>
5
6<script>
7import SoftInput from "@/components/SoftInput.vue";
8export default { components: { SoftInput, }, };
9</script>
Use these examples to create inputs of different sizes.
1<template>
2 <soft-input placeholder="Type here..." size="sm" />
3 <soft-input placeholder="Type here..." size="md" />
4 <soft-input placeholder="Type here..." size="lg" />
5</template>
6
7<script>
8import SoftInput from "@/components/SoftInput.vue";
9export default { components: { SoftInput, }, };
10</script>
Use this example to create a detailed form using our Vue.js-based inputs.
1<template>
2 <soft-input type="text" placeholder="Text" value="John Smith" />
3 <soft-input type="search" placeholder="Search" value="Creative Tim" />
4 <soft-input type="email" placeholder="Email" value="[email protected]" />
5 <soft-input type="url" placeholder="URL" value="www.creative-tim.com" />
6 <soft-input type="tel" placeholder="Phone" value="40-(770)-888-444" />
7 <soft-input type="password" placeholder="Password" value="password" />
8 <soft-input type="number" placeholder="Number" value="123456789" />
9 <soft-input type="datetime" placeholder="Date time" value="2018-11-23T10:30:00" />
10 <soft-input type="date" placeholder="Date" value="2018-11-23" />
11 <soft-input type="month" placeholder="Month" value="2018-11" />
12 <soft-input type="week" placeholder="Week" value="2018-W23" />
13 <soft-input type="time" placeholder="Time" value="10:30:00" />
14 <soft-input type="color" placeholder="Color" value="#17c1e8" />
15</template>
16
17<script>
18import SoftInput from "@/components/SoftInput.vue";
19export default { components: { SoftInput, }, };
20</script>