WtInputText

Props

v-model:

Prop: value

Event: input

Props:

Name	Required	Type	Default	Example code	Description
modelValue		String		<wt-input-text v-model="value"></wt-input-text>	Input value (v-model)
label		String		<wt-input-text label="Username"></wt-input-text>	Input label
placeholder		String		<wt-input-text placeholder="Enter text"></wt-input-text>	Input placeholder
disabled		Boolean	false	<wt-input-text disabled></wt-input-text>	Disable input
required		Boolean	false	<wt-input-text required></wt-input-text>	Show required asterisk in label
invalid		Boolean	false	<wt-input-text invalid></wt-input-text>	Show invalid state
preventTrim		Boolean	false	<wt-input-text prevent-trim></wt-input-text>	Prevent trimming input value

Events:

Name	Params	Description
update:modelValue	[ { "name": "value", "type": "String" } ]	Emitted when input value changes

Slots:

Name	Scope	Description
label	[ { "name": "label" } ]	Custom label slot
prefix		Prefix content for input group (icon, text, etc.)
suffix		Suffix content for input group (icon, text, etc.)

Basic Input Text

Username

Code

<script setup>
import { ref } from 'vue';

const value = ref('');
</script>

<template>
  <wt-input-text
    v-model="value"
    label="Username"
    placeholder="Enter username"
  />
</template>

<style scoped lang="scss"></style>

Input Text with Prefix

Website

https://

Code

<script setup>
import { ref } from 'vue';

const value = ref('');
</script>

<template>
  <wt-input-text
    v-model="value"
    label="Website"
    placeholder="example.com"
  >
    <template #prefix>
      https://
    </template>
  </wt-input-text>
</template>

<style scoped lang="scss"></style>

Disabled Input Text

Disabled Input

Code

<script setup>
import { ref } from 'vue';

const value = ref('Disabled value');
</script>

<template>
  <wt-input-text
    v-model="value"
    label="Disabled Input"
    disabled
  />
</template>

<style scoped lang="scss"></style>

Invalid Input Text

Invalid input*

Field is required

Code

<template>
  <wt-input-text
    v-model="value"
    :v="v$.value"
    label="Invalid input"
    name="invalid-input"
  />
</template>

<script setup>
import { useVuelidate } from '@vuelidate/core';
import { computed,ref } from 'vue';

const value = ref('invalid value');

const v$ = useVuelidate(
  computed(() => ({
    value: {
      required: () => false,
    },
  })),
  { value },
);

v$.value.$touch();
</script>