Text

The text input type is used for general string input fields. It's the most common input type and supports various validation rules.

<template>
    <VsInputText v-model="textValue" />
</template>
<script setup>
import { ref } from 'vue'
import { VsInputText } from '@opengis/form'

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

Basic Text Input

<VsInputText v-model="textValue" placeholder="Enter text" />

{
  name: 'username',
  type: 'text',
  label: 'Username',
  placeholder: 'Enter username',
  rules: ['required']
}

Text with Validation

<VsInputText v-model="textValue" placeholder="Enter email" />

{
  name: 'email',
  type: 'text',
  label: 'Email Address',
  placeholder: 'Enter your email',
  rules: ['required', 'email']
}

Properties

Required Properties

• name (string): Unique identifier for the field
• type (string): Must be 'text'
• label (string): Display label for the field

Optional Properties

• placeholder (string): Hint text shown when field is empty
• disabled (boolean): Whether the field is disabled
• readonly (boolean): Whether the field is read-only
• maxlength (number): Maximum number of characters allowed
• minlength (number): Minimum number of characters required
• rules (array): Validation rules
• conditions (object): Conditional display logic

Schema Interface

interface TextSchemaItem {
  name: string;
  type: 'text';
  label: string;
  placeholder?: string;
  disabled?: boolean;
  readonly?: boolean;
  maxlength?: number;
  minlength?: number;
  rules?: (string | object)[];
  conditions?: Conditions | Conditions[];
}

Best Practices

1. Use descriptive placeholders that guide users on what to enter
2. Provide clear labels that explain the purpose of the field
3. Use appropriate validation (required, email, min/max length)
4. Set reasonable character limits to prevent abuse
5. Use consistent styling across your application
6. Consider accessibility with proper ARIA labels
7. Provide helpful error messages for validation failures
8. Use autocomplete attributes for common fields (name, email, etc.)
9. Consider input masking for structured data (phone, SSN, etc.)
10. Test with keyboard navigation for accessibility compliance