Input

Enter characters using mouse or keyboard.

Basic Input

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="Basic input" />
  <span>{{test}}</span>
</template>

Disabled Input

Use the disabled prop to specify whether the input is disabled.

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('some text')
</script>
<template>
  <Input v-model="test" disabled />
</template>

Size Variants

Use the size prop to change the size of the input box. Besides the default size, there are two other options: large and small.

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <div class="size-holder">
    <Input v-model="test" placeholder="Large Input" size="large">
    </Input>
    <Input v-model="test" placeholder="normal Input">
    </Input>
    <Input v-model="test" placeholder="small Input" size="small">
    </Input>
  </div>
</template>
<style scoped>
.size-holder {
  display: flex;
  align-items: center;
}
</style>

Compound Input

You can prepend or append elements such as labels or buttons to the input box using the prepend and append slots.
Use the prefix and suffix slots to add elements inside the input.

Https://

.com

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
import Icon from '@/components/Icon/Icon.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="prepend append">
    <template #prepend>Https://</template>
    <template #append>.com</template>
  </Input>

  <Input v-model="test" placeholder="prefix suffix">
    <template #prefix>
      <Icon icon="fa-user" />
    </template>
    <template #suffix>
      <Icon icon="fa-user" />
    </template>
  </Input>
</template>

Textarea

For entering multiline text, use a resizable input box.
Add the type="textarea" prop to convert the input into a native textarea element.

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="Textarea" type="textarea">
  </Input>
</template>

Password Input

Use the show-password prop to enable a toggleable password visibility button.

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" placeholder="Password text field, can be toggled" showPassword/>
</template>

Clearable Input

Use the clearable prop to allow one-click clearing of the input box.

<script setup>
import { ref } from 'vue'
import Input from '@/components/Input/Input.vue'
const test = ref('')
</script>
<template>
  <Input v-model="test" clearable placeholder="Clear"/>
</template>

Props

Name	Description	Type	Default
type	Native input type	'string'	'text'
model-value / v-model	Bound value	string	—
disabled	Whether the input is disabled	boolean	false
placeholder	Placeholder text for the input	string	—
size	Size of the input (only applies when type is not 'textarea')	'large' | 'small'	—
show-password	Whether to show the toggle password icon	boolean	false
clearable	Whether to show a clear (reset) button	boolean	false
readonly	Native readonly attribute	boolean	false
autofocus	Native autofocus attribute	boolean	false
autocomplete	Native autocomplete attribute	string	'off'

---

Events

Name	Description	Type
blur	Triggered when the input loses focus	(e: FocusEvent) => void
focus	Triggered when the input gains focus	(e: FocusEvent) => void
change	Triggered when the input loses focus and value changes	(e: string) => void
input	Triggered when the input value changes	(e: string) => void
clear	Triggered when the clear button is clicked	() => void

---

Slots

Name	Description
prefix	Content before the input
suffix	Content after the input
prepend	Content prepended to input
append	Content appended to input

---

Exposes

Name	Description	Type
ref	Input or textarea DOM element	Ref<HTMLInputElement | HTMLTextAreaElement>