Van Field

Vant Field Component

Field component let users enter and edit text with various input types and validation support.

When to Invoke

Invoke this skill when:

• User needs to implement text input fields
• User wants to create textarea with auto-resize
• User needs to format input values
• User wants to show error messages
• User asks about form validation
• User needs to implement various input types (tel, number, digit, password)

Features

• Multiple Input Types: text, tel, digit, number, password, textarea
• Auto Resize: Textarea auto-resize support
• Value Formatting: Format input values
• Validation: Form validation rules support
• Error Display: Show error messages
• Icons: Left and right icon support
• Clearable: Clear button support
• Word Limit: Show word count limit
• Custom Slots: Multiple slots for customization

API Reference

Props

Events

Methods

Use ref to get Field instance and call instance methods.

Slots

Usage Examples

Basic Usage

<template>
  <van-cell-group inset>
    <van-field v-model="value" label="Label" placeholder="Text" />
  </van-cell-group>
</template>

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

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

Custom Type

<template>
  <van-cell-group inset>
    <van-field v-model="text" label="Text" />
    <van-field v-model="tel" type="tel" label="Phone" />
    <van-field v-model="digit" type="digit" label="Digit" />
    <van-field v-model="number" type="number" label="Number" />
    <van-field v-model="password" type="password" label="Password" />
  </van-cell-group>
</template>

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

const tel = ref('')
const text = ref('')
const digit = ref('')
const number = ref('')
const password = ref('')
</script>

Disabled

<template>
  <van-cell-group inset>
    <van-field label="Text" model-value="Input Readonly" readonly />
    <van-field label="Text" model-value="Input Disabled" disabled />
  </van-cell-group>
</template>

Show Icon

<template>
  <van-cell-group inset>
    <van-field
      v-model="value1"
      label="Text"
      left-icon="smile-o"
      right-icon="warning-o"
      placeholder="Show Icon"
    />
    <van-field
      v-model="value2"
      clearable
      label="Text"
      left-icon="music-o"
      placeholder="Show Clear Icon"
    />
  </van-cell-group>
</template>

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

const value1 = ref('')
const value2 = ref('123')
</script>

Required

<template>
  <van-cell-group inset>
    <van-field
      v-model="username"
      required
      label="Username"
      placeholder="Username"
    />
    <van-field v-model="phone" required label="Phone" placeholder="Phone" />
  </van-cell-group>
</template>

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

const username = ref('')
const phone = ref('')
</script>

Error Info

<template>
  <van-cell-group inset>
    <van-field v-model="username" error label="Username" placeholder="Username" />
    <van-field
      v-model="phone"
      label="Phone"
      placeholder="Phone"
      error-message="Invalid phone"
    />
  </van-cell-group>
</template>

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

const username = ref('')
const phone = ref('')
</script>

Insert Button

<template>
  <van-cell-group inset>
    <van-field v-model="sms" center clearable label="SMS" placeholder="SMS">
      <template #button>
        <van-button size="small" type="primary">Send SMS</van-button>
      </template>
    </van-field>
  </van-cell-group>
</template>

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

const sms = ref('')
</script>

Format Value

<template>
  <van-cell-group inset>
    <van-field
      v-model="value1"
      label="Text"
      :formatter="formatter"
      placeholder="Format On Change"
    />
    <van-field
      v-model="value2"
      label="Text"
      :formatter="formatter"
      format-trigger="onBlur"
      placeholder="Format On Blur"
    />
  </van-cell-group>
</template>

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

const value1 = ref('')
const value2 = ref('')

const formatter = (value) => value.replace(/\d/g, '')
</script>

Auto Resize

<template>
  <van-cell-group inset>
    <van-field
      v-model="message"
      label="Message"
      type="textarea"
      placeholder="Message"
      rows="1"
      autosize
    />
  </van-cell-group>
</template>

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

const message = ref('')
</script>

Show Word Limit

<template>
  <van-cell-group inset>
    <van-field
      v-model="message"
      rows="2"
      autosize
      label="Message"
      type="textarea"
      maxlength="50"
      placeholder="Message"
      show-word-limit
    />
  </van-cell-group>
</template>

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

const message = ref('')
</script>

Input Align

<template>
  <van-cell-group inset>
    <van-field
      v-model="value"
      label="Text"
      placeholder="Input Align Right"
      input-align="right"
    />
  </van-cell-group>
</template>

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

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

Label Align

<template>
  <van-cell-group inset>
    <van-field
      v-model="value"
      label="Label"
      placeholder="Align Top"
      label-align="top"
    />
    <van-field
      v-model="value2"
      label="Label"
      placeholder="Align Left"
      label-align="left"
    />
    <van-field
      v-model="value3"
      label="Label"
      placeholder="Align Center"
      label-align="center"
    />
    <van-field
      v-model="value4"
      label="Label"
      placeholder="Align Right"
      label-align="right"
    />
  </van-cell-group>
</template>

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

const value = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
</script>

Best Practices

1. Use with Form: Combine with Form component for validation support.

2. Input Types: Use appropriate input types (tel, digit, number) for better mobile keyboard experience.

3. Auto Resize: Use autosize for textarea to improve user experience.

4. Validation: Define validation rules in the rules prop for form validation.

5. Formatting: Use formatter to sanitize or format user input.

6. Accessibility: Provide clear labels and placeholders for better accessibility.

7. Error Handling: Use error-message to provide clear feedback for validation errors.

8. Word Limit: Use show-word-limit with maxlength for text length constraints.