Input
Input component let users enter and edit text.
Basic Usage
View Source
vue
<script setup lang="ts">
import { UniInput } from "unify-ui";
import { ref } from "vue";
const value = ref("");
</script>
<template>
<UniInput v-model="value" />
</template>
<style lang="scss" scoped>
.container > div {
margin-bottom: 20px;
}
</style>Placeholder
View Source
vue
<script setup lang="ts">
import { UniInput } from "unify-ui";
</script>
<template>
<UniInput placeholder="placeholder: you@email.com"></UniInput>
</template>Disabled
You can use the disabled property to control the Input component's disabled state.
View Source
vue
<script setup lang="ts">
import { UniInput } from "unify-ui";
import { ref } from "vue";
const value = ref("This Input is disabled");
</script>
<template>
<UniInput v-model="value" disabled></UniInput>
</template>Add-on
The Input component supports add-ons. To add the leading add-on, use the leading-add-on slot. To add the trailing add-on, use the trailing-add-on slot.
View Source
vue
<script setup lang="ts">
import { ref } from "vue";
import { UniInput } from "unify-ui";
const value = ref("");
</script>
<template>
<div class="container">
<div>
<UniInput v-model="value">
<template #leading-add-on>
<span>http://</span>
</template>
</UniInput>
</div>
<div>
<UniInput v-model="value">
<template #trailing-add-on>
<span>.com</span>
</template>
</UniInput>
</div>
<div>
<UniInput v-model="value">
<template #leading-add-on>
<span>http://</span>
</template>
<template #trailing-add-on>
<span>.com</span>
</template>
</UniInput>
</div>
</div>
</template>
<style lang="scss" scoped>
.container > div {
margin-bottom: 20px;
}
</style>The example of adding add-ons to a disabled input:
View Source
vue
<script setup lang="ts">
import { ref } from "vue";
import { UniInput } from "unify-ui";
const value = ref("");
</script>
<template>
<div class="container">
<div>
<UniInput v-model="value" disabled>
<template #leading-add-on>
<span>http://</span>
</template>
</UniInput>
</div>
<div>
<UniInput v-model="value" disabled>
<template #trailing-add-on>
<span>.com</span>
</template>
</UniInput>
</div>
<div>
<UniInput v-model="value" disabled>
<template #leading-add-on>
<span>http://</span>
</template>
<template #trailing-add-on>
<span>.com</span>
</template>
</UniInput>
</div>
</div>
</template>
<style lang="scss" scoped>
.container > div {
margin-bottom: 20px;
}
</style>Inline Add-on
The Input component supports inline add-ons. To add the inline leading add-on, use the inline-leading-add-on slot. To add the inline trailing add-on, use the inline-trailing-add-on slot.
View Source
vue
<script setup lang="ts">
import { ref } from "vue";
import { UniInput } from "unify-ui";
const value = ref("");
</script>
<template>
<div class="container">
<div>
<UniInput v-model="value">
<template #inline-leading-add-on>
<span>http://</span>
</template>
</UniInput>
</div>
<div>
<UniInput v-model="value">
<template #inline-trailing-add-on>
<span>.com</span>
</template>
</UniInput>
</div>
<div>
<UniInput v-model="value">
<template #inline-leading-add-on>
<span>http://</span>
</template>
<template #inline-trailing-add-on>
<span>.com</span>
</template>
</UniInput>
</div>
</div>
</template>
<style lang="scss" scoped>
.container > div {
margin-bottom: 20px;
}
</style>The example of adding leading add-ons to a disabled input:
View Source
vue
<script setup lang="ts">
import { ref } from "vue";
import { UniInput } from "unify-ui";
const value = ref("disabled");
</script>
<template>
<div class="container">
<div>
<UniInput v-model="value" disabled>
<template #inline-leading-add-on>
<span>http://</span>
</template>
</UniInput>
</div>
<div>
<UniInput v-model="value" disabled>
<template #inline-trailing-add-on>
<span>.com</span>
</template>
</UniInput>
</div>
<div>
<UniInput v-model="value" disabled>
<template #inline-leading-add-on>
<span>http://</span>
</template>
<template #inline-trailing-add-on>
<span>.com</span>
</template>
</UniInput>
</div>
</div>
</template>
<style lang="scss" scoped>
.container > div {
margin-bottom: 20px;
}
</style>Status: Error
View Source
vue
<script setup lang="ts">
import { UniInput } from "unify-ui";
</script>
<template>
<div class="container">
<div>
<UniInput status="error" class="input-cls"></UniInput>
</div>
<div>
<UniInput status="error" class="input-cls">
<template #inline-leading-add-on>
<span>http://</span>
</template>
<template #inline-trailing-add-on>
<span>.com</span>
</template>
</UniInput>
</div>
<div>
<UniInput status="error" class="input-cls">
<template #leading-add-on>
<span>http://</span>
</template>
<template #trailing-add-on>
<span>.com</span>
</template>
</UniInput>
</div>
</div>
</template>
<style lang="scss" scoped>
.container > div {
margin-bottom: 20px;
}
.input-cls {
width: 300px;
}
</style>API
Properties
ts
withDefaults(
defineProps<{
/** Input value */
modelValue?: string;
/** Whether the input is disabled */
disabled?: boolean;
/** Input placeholder */
placeholder?: string;
/** Control input editability */
readonly?: boolean;
/** native input types */
type?: string;
status?: "normal" | "error";
}>(),
{
modelValue: "",
placeholder: "",
type: "text",
status: "normal",
}
);Events
ts
defineEmits<{
(e: "update:modelValue", value: string): void;
/** The 'input' event is triggered when the value of an Input components changes. */
(e: "input", value: string): void;
/**
* The 'change' event fires when the value is committed, for example, by pressing the
* enter key or when the input element loses focus after its value has been changed
*/
(e: "change", value: string): void;
}>();Slots
ts
defineSlots<{
["leading-add-on"](props: {}): any;
["trailing-add-on"](props: {}): any;
["inline-leading-add-on"](props: {}): any;
["inline-trailing-add-on"](props: {}): any;
}>();