/*! For license information please see 29.8204ed5c.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["29"],{46390:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Field

\n

Intro

\n

Field component let users enter and edit text.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { Field, CellGroup } from 'vant';\n\nconst app = createApp();\napp.use(Field);\napp.use(CellGroup);\n
\n

Usage

\n

Basic Usage

\n

The value of field is bound with v-model.

\n
<van-cell-group inset>\n  <van-field v-model="value" label="Label" placeholder="Text" />\n</van-cell-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value = ref('');\n    return { value };\n  },\n};\n
\n

Custom Type

\n

Use type prop to custom different type fields.

\n
<van-cell-group inset>\n  <van-field v-model="text" label="Text" />\n  <van-field v-model="tel" type="tel" label="Phone" />\n  <van-field v-model="digit" type="digit" label="Digit" />\n  <van-field v-model="number" type="number" label="Number" />\n  <van-field v-model="password" type="password" label="Password" />\n</van-cell-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const tel = ref('');\n    const text = ref('');\n    const digit = ref('');\n    const number = ref('');\n    const password = ref('');\n\n    return { tel, text, digit, number, password };\n  },\n};\n
\n

Disabled

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

Show Icon

\n
<van-cell-group inset>\n  <van-field\n    v-model="value1"\n    label="Text"\n    left-icon="smile-o"\n    right-icon="warning-o"\n    placeholder="Show Icon"\n  />\n  <van-field\n    v-model="value2"\n    clearable\n    label="Text"\n    left-icon="music-o"\n    placeholder="Show Clear Icon"\n  />\n</van-cell-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value1 = ref('');\n    const value2 = ref('123');\n    return {\n      value1,\n      value2,\n    };\n  },\n};\n
\n

Required

\n

Use the required prop to display a required asterisk.

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

Please note that the required prop is only used for controlling the style. For form validation, you need to use the rule.required option to control the validation logic.

\n

Auto Required

\n

You can set required="auto" on the Form component, and all the fields inside the Form will automatically display the asterisk based on the rule.required option.

\n
<van-form required="auto">\n  <van-field\n    v-model="username"\n    :rules="[{ required: true }]"\n    label="Username"\n    placeholder="Username"\n  />\n  <van-field\n    v-model="phone"\n    :rules="[{ required: false }]"\n    label="Phone"\n    placeholder="Phone"\n  />\n</van-form>\n
\n

Error Info

\n

Use error or error-message to show error info.

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

Insert Button

\n

Use button slot to insert button.

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

Format Value

\n

Use formatter prop to format the input value.

\n
<van-cell-group inset>\n  <van-field\n    v-model="value1"\n    label="Text"\n    :formatter="formatter"\n    placeholder="Format On Change"\n  />\n  <van-field\n    v-model="value2"\n    label="Text"\n    :formatter="formatter"\n    format-trigger="onBlur"\n    placeholder="Format On Blur"\n  />\n</van-cell-group>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const value1 = ref('');\n    const value2 = ref('');\n    const formatter = (value) => value.replace(/\\d/g, '');\n\n    return {\n      value1,\n      value2,\n      formatter,\n    };\n  },\n};\n
\n

Auto Resize

\n

Textarea Field can be auto resize when has autosize prop.

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

Show Word Limit

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

Input Align

\n

Use input-align prop to align the input value.

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

Label Align

\n

Use label-align prop to align the input value, can be set to center, right or top.

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

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-modelInput valuenumber | string-
labelLeft side labelstring-
nameAs the identifier when submitting the formstring-
idInput id, the for attribute of the label also will be setstringvan-field-n-input
typeInput type, support all native types and digit typeFieldTypetext
sizeSize, can be set to large normalstring-
maxlengthMax length of valuenumber | string-
placeholderInput placeholderstring-
borderWhether to show inner borderbooleantrue
disabledWhether to disable fieldbooleanfalse
readonlyWhether to be readonlybooleanfalse
colonWhether to display colon after labelbooleanfalse
requiredWhether to show required markboolean | \'auto\'null
centerWhether to center content verticallybooleantrue
clearableWhether to be clearablebooleanfalse
clear-iconClear icon namestringclear
clear-triggerWhen to display the clear icon, always means to display the icon when value is not empty, focus means to display the icon when input is focusedFieldClearTriggerfocus
clickableWhether to show click feedback when clickedbooleanfalse
is-linkWhether to show link iconbooleanfalse
autofocusWhether to auto focus, unsupported in iOSbooleanfalse
show-word-limitWhether to show word limit, need to set the maxlength propbooleanfalse
errorWhether to mark the input content in redbooleanfalse
error-messageError messagestring-
error-message-alignError message align, can be set to center rightFieldTextAlignleft
formatterInput value formatter(val: string) => string-
format-triggerWhen to format value, can be set to onBlurFieldFormatTriggeronChange
arrow-directionCan be set to left up downstringright
label-classLabel classNamestring | Array | object-
label-widthLabel widthnumber | string6.2em
label-alignLabel align, can be set to center right topFieldTextAlignleft
input-alignInput align, can be set to center rightFieldTextAlignleft
autosizeTextarea auto resize, can accept an object,
e.g. { maxHeight: 100, minHeight: 50 }		boolean | FieldAutosizeConfigfalse
left-iconLeft side icon namestring-
right-iconRight side icon namestring-
icon-prefixIcon className prefixstringvan-icon
rulesForm validation rulesFieldRule[]-
autocompleteHTML native attribute, see MDN - autocompletestring-
autocapitalize v4.6.2HTML native attribute, see MDN - autocapitalize
string-
enterkeyhintHTML native attribute, see MDN - enterkeyhint
string-
spellcheck v4.6.2HTML native attribute, see MDN - spellcheck
boolean-
autocorrect v4.6.2Safari only, see MDN - autocorrect
string-
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
update:model-valueEmitted when input value changedvalue: string
focusEmitted when input is focusedevent: Event
blurEmitted when input is blurredevent: Event
clearEmitted when the clear icon is clickedevent: MouseEvent
clickEmitted when component is clickedevent: MouseEvent
click-inputEmitted when the input is clickedevent: MouseEvent
click-left-iconEmitted when the left icon is clickedevent: MouseEvent
click-right-iconEmitted when the right icon is clickedevent: MouseEvent
start-validateEmitted when start validation-
end-validateEmitted when end validation{ status: string, message: string }
\n

Methods

\n

Use ref to get Field instance and call instance methods.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionAttributeReturn value
focusTrigger input focus--
blurTrigger input blur--
\n

Types

\n

The component exports the following type definitions:

\n
import type {\n  FieldType,\n  FieldRule,\n  FieldProps,\n  FieldInstance,\n  FieldTextAlign,\n  FieldRuleMessage,\n  FieldClearTrigger,\n  FieldFormatTrigger,\n  FieldRuleValidator,\n  FieldRuleFormatter,\n  FieldValidateError,\n  FieldAutosizeConfig,\n  FieldValidateTrigger,\n  FieldValidationStatus,\n} from 'vant';\n
\n

FieldInstance is the type of component instance:

\n
import { ref } from 'vue';\nimport type { FieldInstance } from 'vant';\n\nconst fieldRef = ref<FieldInstance>();\n\nfieldRef.value?.focus();\n
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionSlotProps
labelCustom label-
inputCustom input-
left-iconCustom left icon-
right-iconCustom right icon-
buttonInsert button-
error-messageCustom error message{ message: string }
extraCustom content on the right-
\n

Theming

\n

CSS Variables

\n

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-field-label-width6.2em-
--van-field-label-colorvar(--van-text-color)-
--van-field-label-margin-rightvar(--van-padding-sm)-
--van-field-input-text-colorvar(--van-text-color)-
--van-field-input-error-text-colorvar(--van-danger-color)-
--van-field-input-disabled-text-colorvar(--van-text-color-3)-
--van-field-placeholder-text-colorvar(--van-text-color-3)-
--van-field-icon-size18px-
--van-field-clear-icon-size18px-
--van-field-clear-icon-colorvar(--van-gray-5)-
--van-field-right-icon-colorvar(--van-gray-6)-
--van-field-error-message-colorvar(--van-danger-color)-
--van-field-error-message-font-size12px-
--van-field-text-area-min-height60px-
--van-field-word-limit-colorvar(--van-gray-7)-
--van-field-word-limit-font-sizevar(--van-font-size-sm)-
--van-field-word-limit-line-height16px-
--van-field-disabled-text-colorvar(--van-text-color-3)-
--van-field-required-mark-colorvar(--van-red)-
\n
'},null,8,l))}}}]);