Input
An input element to enter text.
Demo
Related Components
This requires the following components to be installed:
Related Composables
This requires the following composables to be installed:
Related Utils
This requires the following utils to be installed:
Related Theme
This requires the following theme to be installed:
Component
vue
<script lang="ts">
import type { AvatarProps } from '@/ui/components/Avatar.vue'
import type { UseComponentIconsProps } from '@/ui/composables/useComponentIcons'
import type { VariantProps } from 'tailwind-variants'
import type { InputHTMLAttributes } from 'vue'
import Avatar from '@/ui/components/Avatar.vue'
import Icon from '@/ui/components/Icon.vue'
import { useButtonGroup } from '@/ui/composables/useButtonGroup'
import { useComponentIcons } from '@/ui/composables/useComponentIcons'
import { useFormField } from '@/ui/composables/useFormField'
import theme from '@/ui/theme/input'
import { looseToNumber } from '@/ui/utils/loose-to-number'
import { Primitive } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed, onMounted, ref } from 'vue'
const input = tv(theme)
type InputVariants = VariantProps<typeof input>
export interface InputProps extends UseComponentIconsProps {
as?: any
id?: string
name?: string
type?: InputHTMLAttributes['type']
placeholder?: string
color?: InputVariants['color']
variant?: InputVariants['variant']
size?: InputVariants['size']
required?: boolean
autocomplete?: InputHTMLAttributes['autocomplete']
autofocus?: boolean
autofocusDelay?: number
disabled?: boolean
highlight?: boolean
class?: any
ui?: Partial<typeof input.slots>
}
export interface InputEmits {
(e: 'update:modelValue', payload: string | number): void
(e: 'blur', event: FocusEvent): void
(e: 'change', event: Event): void
}
export interface InputSlots {
leading: (props?: object) => any
default: (props?: object) => any
trailing: (props?: object) => any
}
</script>
<script setup lang="ts">
defineOptions({ inheritAttrs: false })
const props = withDefaults(defineProps<InputProps>(), {
type: 'text',
autocomplete: 'off',
autofocusDelay: 0,
})
const emits = defineEmits<InputEmits>()
const slots = defineSlots<InputSlots>()
const [modelValue, modelModifiers] = defineModel<string | number>()
const { size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
const ui = computed(() => input({
type: props.type as InputVariants['type'],
color: color.value,
variant: props.variant,
size: inputSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!props.avatar || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
buttonGroup: orientation.value,
}))
const inputRef = ref<HTMLInputElement | null>(null)
function autoFocus() {
if (props.autofocus) {
inputRef.value?.focus()
}
}
// Custom function to handle the v-model properties
function updateInput(value: string) {
if (modelModifiers.trim) {
value = value.trim()
}
if (modelModifiers.number || props.type === 'number') {
value = looseToNumber(value)
}
modelValue.value = value
}
function onInput(event: Event) {
if (!modelModifiers.lazy) {
updateInput((event.target as HTMLInputElement).value)
}
}
function onChange(event: Event) {
const value = (event.target as HTMLInputElement).value
if (modelModifiers.lazy) {
updateInput(value)
}
// Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
if (modelModifiers.trim) {
(event.target as HTMLInputElement).value = value.trim()
}
emits('change', event)
}
function onBlur(event: FocusEvent) {
emits('blur', event)
}
defineExpose({
inputRef,
})
onMounted(() => {
setTimeout(() => {
autoFocus()
}, props.autofocusDelay)
})
</script>
<template>
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<input
:id="id"
ref="inputRef"
:type="type"
:value="modelValue"
:name="name"
:placeholder="placeholder"
:class="ui.base({ class: props.ui?.base })"
:disabled="disabled"
:required="required"
:autocomplete="autocomplete"
v-bind="{ ...$attrs, ...ariaAttrs }"
@input="onInput"
@blur="onBlur"
@change="onChange"
>
<slot />
<span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<slot name="leading">
<Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<Avatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
</slot>
</span>
<span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
<slot name="trailing">
<Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
</slot>
</span>
</Primitive>
</template>vue
<script lang="ts">
import type { AvatarProps } from '@/UI/Components/Avatar.vue'
import type { UseComponentIconsProps } from '@/UI/Composables/useComponentIcons'
import type { VariantProps } from 'tailwind-variants'
import type { InputHTMLAttributes } from 'vue'
import Avatar from '@/UI/Components/Avatar.vue'
import Icon from '@/UI/Components/Icon.vue'
import { useButtonGroup } from '@/UI/Composables/useButtonGroup'
import { useComponentIcons } from '@/UI/Composables/useComponentIcons'
import { useFormField } from '@/UI/Composables/useFormField'
import theme from '@/UI/Theme/input'
import { looseToNumber } from '@/UI/Utils/loose-to-number'
import { Primitive } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed, onMounted, ref } from 'vue'
const input = tv(theme)
type InputVariants = VariantProps<typeof input>
export interface InputProps extends UseComponentIconsProps {
as?: any
id?: string
name?: string
type?: InputHTMLAttributes['type']
placeholder?: string
color?: InputVariants['color']
variant?: InputVariants['variant']
size?: InputVariants['size']
required?: boolean
autocomplete?: InputHTMLAttributes['autocomplete']
autofocus?: boolean
autofocusDelay?: number
disabled?: boolean
highlight?: boolean
class?: any
ui?: Partial<typeof input.slots>
}
export interface InputEmits {
(e: 'update:modelValue', payload: string | number): void
(e: 'blur', event: FocusEvent): void
(e: 'change', event: Event): void
}
export interface InputSlots {
leading: (props?: object) => any
default: (props?: object) => any
trailing: (props?: object) => any
}
</script>
<script setup lang="ts">
defineOptions({ inheritAttrs: false })
const props = withDefaults(defineProps<InputProps>(), {
type: 'text',
autocomplete: 'off',
autofocusDelay: 0,
})
const emits = defineEmits<InputEmits>()
const slots = defineSlots<InputSlots>()
const [modelValue, modelModifiers] = defineModel<string | number>()
const { size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
const ui = computed(() => input({
type: props.type as InputVariants['type'],
color: color.value,
variant: props.variant,
size: inputSize?.value,
loading: props.loading,
highlight: highlight.value,
leading: isLeading.value || !!props.avatar || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing,
buttonGroup: orientation.value,
}))
const inputRef = ref<HTMLInputElement | null>(null)
function autoFocus() {
if (props.autofocus) {
inputRef.value?.focus()
}
}
// Custom function to handle the v-model properties
function updateInput(value: string) {
if (modelModifiers.trim) {
value = value.trim()
}
if (modelModifiers.number || props.type === 'number') {
value = looseToNumber(value)
}
modelValue.value = value
}
function onInput(event: Event) {
if (!modelModifiers.lazy) {
updateInput((event.target as HTMLInputElement).value)
}
}
function onChange(event: Event) {
const value = (event.target as HTMLInputElement).value
if (modelModifiers.lazy) {
updateInput(value)
}
// Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
if (modelModifiers.trim) {
(event.target as HTMLInputElement).value = value.trim()
}
emits('change', event)
}
function onBlur(event: FocusEvent) {
emits('blur', event)
}
defineExpose({
inputRef,
})
onMounted(() => {
setTimeout(() => {
autoFocus()
}, props.autofocusDelay)
})
</script>
<template>
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
<input
:id="id"
ref="inputRef"
:type="type"
:value="modelValue"
:name="name"
:placeholder="placeholder"
:class="ui.base({ class: props.ui?.base })"
:disabled="disabled"
:required="required"
:autocomplete="autocomplete"
v-bind="{ ...$attrs, ...ariaAttrs }"
@input="onInput"
@blur="onBlur"
@change="onChange"
>
<slot />
<span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<slot name="leading">
<Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<Avatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
</slot>
</span>
<span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
<slot name="trailing">
<Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
</slot>
</span>
</Primitive>
</template>Theme
ts
import { buttonGroupVariantWithRoot } from '@/ui/theme/button-group'
export default {
slots: {
root: '',
base: '',
leading: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailing: '',
trailingIcon: '',
},
variants: {
...buttonGroupVariantWithRoot,
size: {
xs: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
},
sm: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
},
md: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
},
lg: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
},
xl: {
base: '',
leading: '',
trailing: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
},
},
variant: {
outline: '',
soft: '',
subtle: '',
ghost: '',
none: '',
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
leading: {
true: '',
},
trailing: {
true: '',
},
loading: {
true: '',
},
highlight: {
true: '',
},
type: {
file: '',
},
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline',
} as const,
}View Nuxt UI theme
ts
import { buttonGroupVariantWithRoot } from '@/ui/theme/button-group'
export default {
slots: {
root: 'relative inline-flex items-center',
base: 'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors',
leading: 'absolute inset-y-0 start-0 flex items-center',
leadingIcon: 'shrink-0 text-dimmed',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailing: 'absolute inset-y-0 end-0 flex items-center',
trailingIcon: 'shrink-0 text-dimmed',
},
variants: {
...buttonGroupVariantWithRoot,
size: {
xs: {
base: 'px-2 py-1 text-xs gap-1',
leading: 'ps-2',
trailing: 'pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6',
},
},
variant: {
outline: 'text-highlighted bg-default ring ring-inset ring-accented',
soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
none: 'text-highlighted bg-transparent',
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
leading: {
true: '',
},
trailing: {
true: '',
},
loading: {
true: '',
},
highlight: {
true: '',
},
type: {
file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
},
},
compoundVariants: [
{
color: 'primary' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
},
{
color: 'primary',
highlight: true,
class: 'ring ring-inset ring-primary',
} as const,
{
color: 'secondary' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary',
},
{
color: 'secondary',
highlight: true,
class: 'ring ring-inset ring-secondary',
} as const,
{
color: 'success' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success',
},
{
color: 'success',
highlight: true,
class: 'ring ring-inset ring-success',
} as const,
{
color: 'info' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-info',
},
{
color: 'info',
highlight: true,
class: 'ring ring-inset ring-info',
} as const,
{
color: 'warning' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-warning',
},
{
color: 'warning',
highlight: true,
class: 'ring ring-inset ring-warning',
} as const,
{
color: 'error' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-error',
},
{
color: 'error',
highlight: true,
class: 'ring ring-inset ring-error',
} as const,
{
color: 'neutral' as const,
variant: ['outline' as const, 'subtle' as const],
class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted',
},
{
color: 'neutral',
highlight: true,
class: 'ring ring-inset ring-inverted',
} as const,
{
leading: true,
size: 'xs',
class: 'ps-7',
} as const,
{
leading: true,
size: 'sm',
class: 'ps-8',
} as const,
{
leading: true,
size: 'md',
class: 'ps-9',
} as const,
{
leading: true,
size: 'lg',
class: 'ps-10',
} as const,
{
leading: true,
size: 'xl',
class: 'ps-11',
} as const,
{
trailing: true,
size: 'xs',
class: 'pe-7',
} as const,
{
trailing: true,
size: 'sm',
class: 'pe-8',
} as const,
{
trailing: true,
size: 'md',
class: 'pe-9',
} as const,
{
trailing: true,
size: 'lg',
class: 'pe-10',
} as const,
{
trailing: true,
size: 'xl',
class: 'pe-11',
} as const,
{
loading: true,
leading: true,
class: {
leadingIcon: 'animate-spin',
},
} as const,
{
loading: true,
leading: false,
trailing: true,
class: {
trailingIcon: 'animate-spin',
},
} as const,
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'outline',
} as const,
}Test
To test this component, you can use the following test file:
ts
import type { RenderOptions } from '@testing-library/vue'
import Input from '@/ui/components/Input.vue'
import theme from '@/ui/theme/input'
import { render } from '@testing-library/vue'
import { describe, expect, it } from 'vitest'
describe('input', () => {
const sizes = Object.keys(theme.variants.size) as any
const variants = Object.keys(theme.variants.variant) as any
it.each<[string, RenderOptions<typeof Input>]>([
// Props
['with id', { props: { id: 'id' } }],
['with name', { props: { name: 'name' } }],
['with type', { props: { type: 'password' } }],
['with placeholder', { props: { placeholder: 'Search...' } }],
['with disabled', { props: { disabled: true } }],
['with required', { props: { required: true } }],
['with file type', { props: { type: 'file' } }],
['with icon', { props: { icon: 'i-lucide-search' } }],
['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
['with avatar', { props: { avatar: { src: 'https://github.com/vue.png' } } }],
['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
['with loading', { props: { loading: true } }],
['with loading and avatar', { props: { loading: true, avatar: { src: 'https://github.com/vue.png' } } }],
['with loading trailing', { props: { loading: true, trailing: true } }],
['with loading trailing and avatar', { props: { loading: true, trailing: true, avatar: { src: 'https://github.com/vue.png' } } }],
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-lucide-sparkles' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { variant, color: 'neutral' } }]),
['with as', { props: { as: 'section' } }],
['with class', { props: { class: 'absolute' } }],
['with ui', { props: { ui: { base: 'rounded-full' } } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }],
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }],
])(`renders %s correctly`, (name, options) => {
const { container } = render(Input, options)
expect(container.firstChild).toMatchSnapshot()
})
})ts
import type { RenderOptions } from '@testing-library/vue'
import Input from '@/UI/Components/Input.vue'
import theme from '@/UI/Theme/input'
import { render } from '@testing-library/vue'
import { describe, expect, it } from 'vitest'
describe('input', () => {
const sizes = Object.keys(theme.variants.size) as any
const variants = Object.keys(theme.variants.variant) as any
it.each<[string, RenderOptions<typeof Input>]>([
// Props
['with id', { props: { id: 'id' } }],
['with name', { props: { name: 'name' } }],
['with type', { props: { type: 'password' } }],
['with placeholder', { props: { placeholder: 'Search...' } }],
['with disabled', { props: { disabled: true } }],
['with required', { props: { required: true } }],
['with file type', { props: { type: 'file' } }],
['with icon', { props: { icon: 'i-lucide-search' } }],
['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
['with avatar', { props: { avatar: { src: 'https://github.com/vue.png' } } }],
['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
['with loading', { props: { loading: true } }],
['with loading and avatar', { props: { loading: true, avatar: { src: 'https://github.com/vue.png' } } }],
['with loading trailing', { props: { loading: true, trailing: true } }],
['with loading trailing and avatar', { props: { loading: true, trailing: true, avatar: { src: 'https://github.com/vue.png' } } }],
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-lucide-sparkles' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { variant, color: 'neutral' } }]),
['with as', { props: { as: 'section' } }],
['with class', { props: { class: 'absolute' } }],
['with ui', { props: { ui: { base: 'rounded-full' } } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }],
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }],
])(`renders %s correctly`, (name, options) => {
const { container } = render(Input, options)
expect(container.firstChild).toMatchSnapshot()
})
})Contributors
barbapapazes