PubInput
This is a input component. It is used to display an input field and supports various input types, such as text, password, email, number, and more.
Default Usage
vue
<template>
<div class="grid gap-6 mb-3 md:grid-cols-2 w-full">
<pub-input
v-model="formData.first_name"
name="first_name"
placeholder="Enter your First Name"
label="First name"
/>
<pub-input
v-model="formData.last_name"
name="last_name"
placeholder="Enter your Last Name"
label="Last name"
/>
<pub-input
v-model="formData.company"
name="company"
placeholder="Enter your Company"
label="Company"
/>
<pub-input
v-model="formData.phone"
type="tel"
name="phone"
placeholder="Enter your Phone number"
label="Phone number"
/>
<pub-input
v-model="formData.website"
type="url"
name="website"
placeholder="Enter your Website URL"
label="Website URL"
/>
<pub-input
v-model="formData.visitors"
type="number"
name="visitors"
placeholder="Enter number of visitors"
label="Number of visitors"
/>
<pub-input
v-model="formData.email"
wrapper-class="col-span-2"
type="email"
name="email"
placeholder="Enter your Email address"
label="Email address"
/>
<pub-input
v-model="formData.password"
wrapper-class="col-span-2"
type="password"
name="password"
placeholder="Enter your Password"
label="Password"
/>
<pub-input
v-model="formData.confirm_password"
wrapper-class="col-span-2"
type="password"
name="confirm_password"
placeholder="Enter your Confirm Password"
label="Confirm password"
/>
</div>
<pub-button>Submit</pub-button>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { PubButton, PubInput } from 'vuelicity'
const formData = reactive({
first_name: '',
last_name: '',
company: '',
phone: '',
email: '',
website: '',
visitors: 0,
password: '',
confirm_password: '',
})
</script>Sizes
Prop - size Usage
The size prop is used to set the size of the input field. It can be one of the following values: sm, md, lg or xl. The default value is md.
vue
<template>
<pub-input
v-model="name"
label="Small"
placeholder="Enter your name"
size="sm"
/>
<pub-input
v-model="name"
label="Medium"
placeholder="Enter your name"
size="md"
/>
<pub-input
v-model="name"
label="Large"
placeholder="Enter your name"
size="lg"
/>
<pub-input
v-model="name"
label="Extra large"
placeholder="Enter your name"
size="xl"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { PubInput } from 'vuelicity'
const name = ref('')
</script>Required
Prop - required Usage
The required prop is used to make the input field required. It can be a boolean value.
vue
<template>
<pub-input
v-model="name"
label="Name"
placeholder="Enter your name"
required
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { PubInput } from 'vuelicity'
const name = ref('')
</script>Disabled
Prop - disabled Usage
The disabled prop is used to disable the input field. It can be a boolean value.
vue
<template>
<pub-input
v-model="name"
label="Name"
placeholder="Enter your name"
disabled
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { PubInput } from 'vuelicity'
const name = ref('Felicia')
</script>Readonly
Prop - readonly Usage
The readonly prop is used to make the input field readonly. It can be a boolean value.
vue
<template>
<pub-input
v-model="value"
label="Readonly input"
placeholder="This value cannot be changed"
readonly
/>
<pub-input
v-model="value"
disabled
label="Disabled + readonly input"
placeholder="This value cannot be changed"
readonly
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { PubInput } from 'vuelicity'
const value = ref('Prefilled Value')
</script>Validation
Prop - validationStatus and Slot - validationMessage Usage
The validationStatus prop is used to set the visual validation state of the input. It can be one of the following values: error, success.
The validationMessage slot is used to display a custom validation message. It can be a string value.
Well done! Username is available!
Oh, snap! Password doesn't contain at least 8 characters and a number.
vue
<template>
<pub-input
v-model="formData.username"
label="Username"
placeholder="Enter your username"
required
validation-status="success"
>
<template #validationMessage>
<span class="font-medium">Well done!</span> Username is available!
</template>
</pub-input>
<hr class="mb-2">
<pub-input
v-model="formData.password"
type="password"
label="Password"
placeholder="Enter your password"
required
validation-status="error"
>
<template #validationMessage>
<span class="font-medium">Oh, snap!</span> Password doesn't contain at least 8 characters and a number.
</template>
</pub-input>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { PubInput } from 'vuelicity'
const formData = reactive({
username: '',
password: '',
})
</script>Input group
Slot - prepend and append Usage
The prepend and append slots are used to display additional content before and after the input field.
@example.com
vue
<template>
<pub-input
v-model="email"
label="Email"
placeholder="Enter your email"
>
<template #prepend>
<pub-icon
name="envelope"
class="text-grey-800"
/>
</template>
</pub-input>
<pub-input
v-model="username"
label="Username"
placeholder="Enter your username"
>
<template #append>
@example.com
</template>
</pub-input>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { PubIcon, PubInput } from 'vuelicity'
const email = ref('')
const username = ref('')
</script>Helper text
Slot - helperText Usage
The helperText slot is used to display helper text below the input field. It can be a string value.
We'll never share your details. Read our Privacy Policy .
vue
<template>
<pub-input
v-model="email"
label="Name"
placeholder="Enter your email"
>
<template #prepend>
<pub-icon
name="envelope"
class="text-grey-800"
/>
</template>
<template #helper>
We'll never share your details. Read our
<a
href="#"
class="text-blue-600 dark:text-blue-500"
> Privacy Policy </a>.
</template>
</pub-input>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { PubIcon, PubInput } from 'vuelicity'
const email = ref('')
</script>Styling input
↣
↢
vue
<template>
<pub-input
v-model="name"
label="Name"
placeholder="enter your name"
wrapper-class="border-2 border-amber-700 dark:border-green-400 bg-amber-300 dark:bg-green-800 rounded-lg p-3"
label-class="text-xl font-bold text-amber-900 dark:text-green-200"
class="bg-amber-100 dark:bg-green-900 border-2 border-amber-500 has-[input:focus]:border-amber-900 has-[input:focus]:ring-amber-300"
input-class="text-amber-900 placeholder:text-amber-500"
prepend-class="bg-amber-200 border-amber-500 text-amber-700 dark:text-green-300"
append-class="bg-amber-200 border-amber-500 text-amber-700 dark:text-green-300"
>
<template #prepend>
↣
</template>
<template #append>
↢
</template>
</pub-input>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { PubInput } from 'vuelicity'
const name = ref('')
</script>Search input
vue
<template>
<pub-input
v-model="searchQuery"
label="Search"
placeholder="Type to search..."
>
<template #prepend>
<pub-icon
name="search"
class="text-grey-700"
size="sm"
type="outline"
/>
</template>
<template #append>
<pub-button
color="blue"
size="xs"
rounded="md"
>
Search
</pub-button>
</template>
</pub-input>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { PubButton, PubIcon, PubInput } from 'vuelicity'
const searchQuery = ref('')
</script>Dropdown input
vue
<template>
<pub-input
v-model="searchQuery"
placeholder="Search for products, brands and more"
append-class="bg-blue-500 text-white"
required
>
<template #prepend>
<pub-dropdown>
<template #trigger>
<pub-button
color="none"
class="border-e border-grey-200 p-1 gap-0.5"
>
<template #prepend>
<pub-icon
name="grid"
size="xs"
type="outline"
/>
</template>
All categories
<template #append>
<pub-icon
name="chevron-down"
size="xs"
/>
</template>
</pub-button>
</template>
<nav class="py-2 text-sm text-grey-700">
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Dashboard </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Settings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Earnings </a>
<a
href="#"
class="block px-4 py-2 hover:bg-grey-100"
> Sign out </a>
</nav>
</pub-dropdown>
</template>
<template #append>
<pub-icon
name="search"
size="sm"
type="outline"
/>
<!-- <pub-button color="blue" size="xs" square rounded="md">
</pub-button> -->
</template>
</pub-input>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { PubButton, PubDropdown, PubIcon, PubInput } from 'vuelicity'
const searchQuery = ref('')
</script>Reference
Properties
| Name | Type | Default | Description | Options |
|---|---|---|---|---|
| autocomplete | String | 'off' | Controls the autocomplete attribute of the input. | 'on', 'off', 'email', 'tel', 'name', 'username', 'current-password', 'country', 'postal-code', 'language', 'bday' |
| class | String | '' | Additional classes for the wrapper element. | |
| disabled | Boolean | false | Disables the input field when true. | |
| inputClass | String | '' | Additional classes for the input element. | |
| label | String | '' | Text label displayed above the input. | |
| labelClass | String | '' | Additional classes for the label element. | |
| required | Boolean | false | Marks the input as required. | |
| size | String | 'md' | Controls the size of the input. | 'sm', 'md', 'lg', 'xl' |
| type | String | 'text' | HTML input type attribute. | 'button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week' |
| validationStatus | String | undefined | Visual validation state of the input. | 'Error', 'Success' |
| wrapperClass | String | '' | Additional classes for the outer wrapper. | |
| prependClass | String | '' | Additional classes for the prepend container element. | |
| appendClass | String | '' | Additional classes for the append container element. |
Slots
| Name | Description |
|---|---|
| prepend | Content placed before the input element. |
| append | Content placed after the input element. |
| validationMessage | Slot for custom validation message. |
| helper | Slot for helper text displayed below the input. |