Input

Default classes

Base Input (wrapper of Virgo Input)

import type { ComponentClasses } from '@/plugin'
import type { baseInputProps } from '@/components/base-input/meta'

export const baseInputClasses: ComponentClasses<baseInputProps> = {
	root: ({ disabled, readonly }) => {
		return [
			'virgo-base-input-root i:children:focus-within:text-primary flex flex-col flex-grow flex-shrink-0 gap-y-1',
			{
				'!all-[.virgo-base-input-input-wrapper]-bg-[hsla(var(--virgo-base-c),0.12)] opacity-50': disabled,
				'pointer-events-none': disabled || readonly,
				'all-[.virgo-base-input-child]-placeholder:transition all-[.virgo-base-input-child]-placeholder:duration-250 all-[.virgo-base-input-child]-placeholder:ease all-[.virgo-base-input-child:focus]-placeholder-translate-x-1': !(disabled || readonly)
			}
		]
	},
	label: ({ error }) => {
		return [
			'virgo-base-input-label',
			{
				'text-red-500': error
			}
		]
	},
	inputContainer: 'virgo-base-input-input-container flex items-center i:w-6 i:h-6 gap-x-3',
	inputWrapper: ({ error }) => {
		return [
			'virgo-base-input-input-wrapper transition duration-250 ease-out flex i:w-5 i:h-5 [&_>_.virgo-spinner]-w-5 h-10 rounded-lg cursor-text px-4 spacing:gap-x-2 relative i:focus-within:text-primary items-center border border-solid border-a-border w-full',
			error ? 'border-red-500' : 'focus-within:border-purple-500'

		]
	},
	inputChild: ({ slots, prependInnerIcon, appendInnerIcon }) => {
		return [
			'virgo-base-input-child w-full h-full  inset-0 rounded-inherit bg-transparent',
			slots?.['prepend-inner'] || prependInnerIcon
				? 'has-prepend-inner'
				: 'has-no-prepend-inner',
			slots?.['append-inner'] || appendInnerIcon
				? 'has-append-inner'
				: 'has-no-append-inner'
		]
	},
	messageContainer: 'h-8',
	message: ({ error }) => error ? 'text-red-500' : 'text-light-emphasis',
	icons: 'transition duration-150 ease-in',
	prependIcon: '',
	appendIcon: '',
	prependInnerIcon: 'z-1',
	appendInnerIcon: 'ms-auto'
}

export type baseInputClassesValidKeys = keyof typeof baseInputClasses

import type { ComponentClasses } from '@/plugin'
import type { baseInputProps } from '@/components/base-input/meta'

export const baseInputClasses: ComponentClasses<baseInputProps> = {
	root: ({ disabled, readonly }) => {
		return [
			'virgo-base-input-root i:children:focus-within:text-primary flex flex-col flex-grow flex-shrink-0 gap-y-1',
			{
				'!all-[.virgo-base-input-input-wrapper]-bg-[hsla(var(--virgo-base-c),0.12)] opacity-50': disabled,
				'pointer-events-none': disabled || readonly,
				'all-[.virgo-base-input-child]-placeholder:transition all-[.virgo-base-input-child]-placeholder:duration-250 all-[.virgo-base-input-child]-placeholder:ease all-[.virgo-base-input-child:focus]-placeholder-translate-x-1': !(disabled || readonly)
			}
		]
	},
	label: ({ error }) => {
		return [
			'virgo-base-input-label',
			{
				'text-red-500': error
			}
		]
	},
	inputContainer: 'virgo-base-input-input-container flex items-center i:w-6 i:h-6 gap-x-3',
	inputWrapper: ({ error }) => {
		return [
			'virgo-base-input-input-wrapper transition duration-250 ease-out flex i:w-5 i:h-5 [&_>_.virgo-spinner]-w-5 h-10 rounded-lg cursor-text px-4 spacing:gap-x-2 relative i:focus-within:text-primary items-center border border-solid border-a-border w-full',
			error ? 'border-red-500' : 'focus-within:border-purple-500'

		]
	},
	inputChild: ({ slots, prependInnerIcon, appendInnerIcon }) => {
		return [
			'virgo-base-input-child w-full h-full  inset-0 rounded-inherit bg-transparent',
			slots?.['prepend-inner'] || prependInnerIcon
				? 'has-prepend-inner'
				: 'has-no-prepend-inner',
			slots?.['append-inner'] || appendInnerIcon
				? 'has-append-inner'
				: 'has-no-append-inner'
		]
	},
	messageContainer: 'h-8',
	message: ({ error }) => error ? 'text-red-500' : 'text-light-emphasis',
	icons: 'transition duration-150 ease-in',
	prependIcon: '',
	appendIcon: '',
	prependInnerIcon: 'z-1',
	appendInnerIcon: 'ms-auto'
}

export type baseInputClassesValidKeys = keyof typeof baseInputClasses

Virgo Input

import type { ComponentClasses } from '@/plugin'
import type { virgoInputProps } from '@/components/input/meta'

export const virgoInputClasses: ComponentClasses<virgoInputProps> = {
	baseInputRoot: 'virgo-input-root',
	fileType: 'file:[&_.virgo-base-input-child]-rounded-lg file:[&_.virgo-base-input-child]-border-none file:[&_.virgo-base-input-child]-mr-4 file:[&_.virgo-base-input-child]-px-4 file:[&_.virgo-base-input-child]-py-3 file:[&_.virgo-base-input-child]-text-gray-200 file:[&_.virgo-base-input-child]-rounded-r-none file:[&_.virgo-base-input-child]-bg-purple-500/05] !all-[.virgo-base-input-input-wrapper]-px-0',
	input: 'virgo-input-input'
}

export type virgoInputClassesValidKeys = keyof typeof virgoInputClasses

import type { ComponentClasses } from '@/plugin'
import type { virgoInputProps } from '@/components/input/meta'

export const virgoInputClasses: ComponentClasses<virgoInputProps> = {
	baseInputRoot: 'virgo-input-root',
	fileType: 'file:[&_.virgo-base-input-child]-rounded-lg file:[&_.virgo-base-input-child]-border-none file:[&_.virgo-base-input-child]-mr-4 file:[&_.virgo-base-input-child]-px-4 file:[&_.virgo-base-input-child]-py-3 file:[&_.virgo-base-input-child]-text-gray-200 file:[&_.virgo-base-input-child]-rounded-r-none file:[&_.virgo-base-input-child]-bg-purple-500/05] !all-[.virgo-base-input-input-wrapper]-px-0',
	input: 'virgo-input-input'
}

export type virgoInputClassesValidKeys = keyof typeof virgoInputClasses

Basic

You can use virgo-input component to render basic input.

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<div>
			<virgo-input />
		</div>
	</div>
</template>

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<div>
			<virgo-input />
		</div>
	</div>
</template>

Placeholder

You can use placeholder attribute to add placeholder to the input.

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<div>
			<virgo-input
				type="email"
				placeholder="Enter your email"
			/>
		</div>
	</div>
</template>

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<div>
			<virgo-input
				type="email"
				placeholder="Enter your email"
			/>
		</div>
	</div>
</template>

Label

You can use label prop to add label to the input.

For maximum flexibility you can use label slot.

Awesome *

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<virgo-input
			label="Email"
			type="email"
			value="user@domain.com"
		/>

		<!-- Custom label -->
		<virgo-input
			id="form-x"
			value="user@domain.com"
			type="email"
		>
			<template #label>
				<label for="virgo-input-form-x">
					<span>Awesome </span>
					<span class="text-red">*</span>
				</label>
			</template>
		</virgo-input>
	</div>
</template>

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<virgo-input
			label="Email"
			type="email"
			value="user@domain.com"
		/>

		<!-- Custom label -->
		<virgo-input
			id="form-x"
			value="user@domain.com"
			type="email"
		>
			<template #label>
				<label for="virgo-input-form-x">
					<span>Awesome </span>
					<span class="text-red">*</span>
				</label>
			</template>
		</virgo-input>
	</div>
</template>

WARNING

When you use label slot, Note that label's for attribute needs to prefix the virgo-input- when binding it to input's id attribute.

TIP

virgo-input built on top of base-input base component. Hence, This demo also applies to all other inherited component.

Hint

You can use hint prop to add hint to the input.

Your email will be confidential

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<div>
			<virgo-input
				id="demo-input-hint"
				label="Email"
				hint="Your email will be confidential"
			/>
		</div>
	</div>
</template>

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<div>
			<virgo-input
				id="demo-input-hint"
				label="Email"
				hint="Your email will be confidential"
			/>
		</div>
	</div>
</template>

Icons

You can use various icon location prop to add icon to the input.

We never share your email with anyone

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<div>
			<virgo-input
				type="password"
				placeholder="Confirm password"
				append-inner-icon="i-bx-check-double"
			></virgo-input>
		</div>
		<div>
			<virgo-input
				type="text"
				placeholder="Enter your email"
				prepend-inner-icon="i-bx-at"
				hint="We never share your email with anyone"
			/>
		</div>
		<div>
			<virgo-input
				type="text"
				placeholder="Enter your username"
				prepend-icon="i-bx-user"
			/>
		</div>
		<div>
			<virgo-input
				type="password"
				placeholder="Enter your password"
				append-icon="i-bx-lock"
			/>
		</div>
	</div>
</template>

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<div>
			<virgo-input
				type="password"
				placeholder="Confirm password"
				append-inner-icon="i-bx-check-double"
			></virgo-input>
		</div>
		<div>
			<virgo-input
				type="text"
				placeholder="Enter your email"
				prepend-inner-icon="i-bx-at"
				hint="We never share your email with anyone"
			/>
		</div>
		<div>
			<virgo-input
				type="text"
				placeholder="Enter your username"
				prepend-icon="i-bx-user"
			/>
		</div>
		<div>
			<virgo-input
				type="password"
				placeholder="Enter your password"
				append-icon="i-bx-lock"
			/>
		</div>
	</div>
</template>

Types

You can use type attribute to add input type.

Text

Password

Number

URL

Time

Date

File

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<virgo-input
			type="text"
			label="Text"
		/>
		<virgo-input
			type="password"
			label="Password"
		/>
		<virgo-input
			type="search"
			label="Search"
		/>
		<virgo-input
			type="number"
			label="Number"
		/>
		<virgo-input
			type="url"
			label="URL"
		/>
		<virgo-input
			type="time"
			label="Time"
		/>
		<virgo-input
			type="date"
			label="Date"
		/>
		<virgo-input
			type="file"
			label="File"
		/>
	</div>
</template>

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<virgo-input
			type="text"
			label="Text"
		/>
		<virgo-input
			type="password"
			label="Password"
		/>
		<virgo-input
			type="search"
			label="Search"
		/>
		<virgo-input
			type="number"
			label="Number"
		/>
		<virgo-input
			type="url"
			label="URL"
		/>
		<virgo-input
			type="time"
			label="Time"
		/>
		<virgo-input
			type="date"
			label="Date"
		/>
		<virgo-input
			type="file"
			label="File"
		/>
	</div>
</template>

States

You can use readonly prop to make input read only.

Use disabled prop to make input disabled.

Disabled

Readonly

<script setup lang="ts">
import { ref } from 'vue'
const name = ref('Input state')
</script>

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<virgo-input
			v-model="name"
			disabled
			label="Disabled"
		/>
		<virgo-input
			v-model="name"
			readonly
			label="Readonly"
		/>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const name = ref('Input state')
</script>

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<virgo-input
			v-model="name"
			disabled
			label="Disabled"
		/>
		<virgo-input
			v-model="name"
			readonly
			label="Readonly"
		/>
	</div>
</template>

Validation

Virgo do not provide any validation mechanism at the moment as it assume it's better handled by third-party libraries like VeeValidate

Username

This is required

<script setup lang="ts">
import { ref, computed} from 'vue'
const username = ref('')
const hasError = computed(()=> {
	return username.value.trim() === ''  ? 'This is required' : undefined
})
</script>

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<div>
			<virgo-input
				v-model="username"
				:error="hasError"
				label="Username"
				hint="Error message will get displayed here"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed} from 'vue'
const username = ref('')
const hasError = computed(()=> {
	return username.value.trim() === ''  ? 'This is required' : undefined
})
</script>

<template>
	<div class="grid-row sm:grid-cols-2 place-items-stretch">
		<div>
			<virgo-input
				v-model="username"
				:error="hasError"
				label="Username"
				hint="Error message will get displayed here"
			/>
		</div>
	</div>
</template>

API

Virgo Input

disabled : boolean

Set component in disabled state

readonly : boolean

Set component in readonly mode

loading : boolean

Set loading state

variant : RawVariant<Record<string, any>>

Useful when used in the component config classes option, to style it conditionally. Can be a string, object, or an array of string or/and object.

bare : boolean

Disable class inheritance from the Virgo plugin classes config. Only for this component.

inputWrapperAttrs : HTMLAttributes

Input wrapper attributes

hint : string

Add hint below the form component

error : string

Error text to render. This will replace hint text if provided.

label : ConfigurableValue

Label of the form component

prependIcon : string

Prepend icon

appendIcon : string

Append icon

prependInnerIcon : string

Prepend icon inside input

appendInnerIcon : string

Append icon inside input

modelValue : string | number

Input ​

Default classes ​

Basic ​

Placeholder ​

Label ​

Hint ​

Icons ​

Types ​

States ​

Validation ​

API ​