Text Field

The Text Field component is used to allow users to provide text input when the expected input is short. As well as plain text, Text Field supports various types of text, including passwords, email addresses and telephone numbers.

Validation

In a Form

When a Text Field is placed inside a form element and validation logic is set on the Text Field, the Text Field is validated when the form is submitted (as per a native input element).

Below, all the Text Fields are marked as required and are validated when the form is submitted.

<script setup lang="ts">
import { VTextField, VLayout, VButton } from '@vonage/vivid-api-vue';
</script>

<template>
  <form method="post" action="" class="form">
    <VLayout column-spacing="small" column-basis="block">
      <VTextField required label="First name" />
      <VTextField required label="Last name" />
      <VTextField required label="Email" type="email" inputmode="email" />
      <div class="buttons">
        <VButton label="Reset" appearance="outlined" type="reset" />
        <VButton label="Submit" appearance="filled" type="submit" />
      </div>
    </VLayout>
  </form>
</template>

<style scoped>
.buttons {
  display: flex;
  gap: 12px;
}
.form {
  max-inline-size: 300px;
}
</style>

<form method="post" action="">
  <vwc-layout column-spacing="small" column-basis="block">
    <vwc-text-field required label="First name"></vwc-text-field>
    <vwc-text-field required label="Last name"></vwc-text-field>
    <vwc-text-field required label="Email" type="email" inputmode="email"></vwc-text-field>
    <div class="buttons">
      <vwc-button label="Reset" appearance="outlined" type="reset"></vwc-button>
      <vwc-button label="Submit" appearance="filled" type="submit"></vwc-button>
    </div>
  </vwc-layout>
</form>

<style>
  .buttons {
    display: flex;
    gap: 12px;
  }
  form {
    max-inline-size: 300px;
  }
</style>

Single Field

The Text Field can be validated like the native input element.

Below, the Text Field is required but it has no value. The checkedValidity() method is called on the Text Field to validate it.

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { VTextField } from '@vonage/vivid-api-vue';

const fieldRef = ref<InstanceType<typeof VTextField> | null>(null);
onMounted(() => {
fieldRef.value?.element?.checkValidity();
});

</script>

<template>
  <VTextField ref="fieldRef" required label="Username" />
</template>

Numeric input

When collecting input which is made up of digits, but not a number in the mathematical sense, use the Text Field with inputmode="numeric" and pattern="[0-9]*".

For mathematical numbers, refer to the number-field component instead.

<script setup lang="ts">
import { VTextField } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTextField inputmode="numeric" pattern="[0-9]*" label="ZIP Code" placeholder="e.g. 90210" />
</template>