tessl/npm-vant

Mobile UI Components library built on Vue 3 with 100+ components

1.07x

Overview

Eval results

Files

Form Components

Name: tessl/npm-vant
Rating: 0.74 (1 reviews)
Author: tessl

Comprehensive form controls for building interactive forms with validation, user input, and data selection. These components provide the foundation for mobile form interfaces.

Capabilities

Field

Primary text input component with extensive customization and validation support.

import { Field } from 'vant';

interface FieldProps {
  /** Input value */
  modelValue?: string | number;
  /** Input type */
  type?: 'text' | 'number' | 'password' | 'textarea' | 'tel' | 'digit' | 'email' | 'url' | 'search';
  /** Input name */
  name?: string;
  /** Field label */
  label?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Left icon */
  leftIcon?: string;
  /** Right icon */
  rightIcon?: string;
  /** Disabled state */
  disabled?: boolean;
  /** Readonly state */
  readonly?: boolean;
  /** Required field marker */
  required?: boolean;
  /** Show clear button */
  clearable?: boolean;
  /** Clickable field */
  clickable?: boolean;
  /** Auto resize for textarea */
  autosize?: boolean | { maxHeight?: number; minHeight?: number };
  /** Maximum input length */
  maxlength?: number | string;
  /** Show word limit */
  showWordLimit?: boolean;
  /** Error message */
  errorMessage?: string;
  /** Formatter function */
  formatter?: (value: string) => string;
  /** Format trigger timing */
  formatTrigger?: 'onChange' | 'onBlur';
  /** Auto focus */
  autofocus?: boolean;
  /** Input align */
  inputAlign?: 'left' | 'center' | 'right';
  /** Label width */
  labelWidth?: string | number;
  /** Label align */
  labelAlign?: 'left' | 'center' | 'right';
  /** Label class */
  labelClass?: string;
  /** Input class */
  inputClass?: string;
  /** Size */
  size?: 'large' | 'normal';
  /** Border */
  border?: boolean;
  /** Center content */
  center?: boolean;
  /** Is link style */
  isLink?: boolean;
  /** Arrow direction */
  arrowDirection?: 'left' | 'up' | 'down' | 'right';
}

// Events
interface FieldEvents {
  'update:modelValue': (value: string) => void;
  click: (event: MouseEvent) => void;
  focus: (event: FocusEvent) => void;
  blur: (event: FocusEvent) => void;
  clear: (event: MouseEvent) => void;
  'click-input': (event: MouseEvent) => void;
  'click-left-icon': (event: MouseEvent) => void;
  'click-right-icon': (event: MouseEvent) => void;
}

Usage Example:

<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="form.username"
        name="username"
        label="Username"
        placeholder="Enter username"
        :rules="[{ required: true, message: 'Username is required' }]"
      />
      
      <van-field
        v-model="form.password"
        type="password"
        name="password"
        label="Password"
        placeholder="Enter password"
        :rules="[{ required: true, message: 'Password is required' }]"
      />
      
      <van-field
        v-model="form.phone"
        type="tel"
        name="phone"
        label="Phone"
        placeholder="Enter phone number"
        maxlength="11"
        show-word-limit
      />
    </van-cell-group>
    
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        Submit
      </van-button>
    </div>
  </van-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { Field, Form, CellGroup, Button } from 'vant';

const form = reactive({
  username: '',
  password: '',
  phone: ''
});

const onSubmit = (values: any) => {
  console.log('Form submitted:', values);
};
</script>

Form

Form container component with validation and submission handling.

import { Form } from 'vant';

interface FormProps {
  /** Colon after label */
  colon?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Readonly state */
  readonly?: boolean;
  /** Show error */
  showError?: boolean;
  /** Show error message */
  showErrorMessage?: boolean;
  /** Submit on enter */
  submitOnEnter?: boolean;
  /** Validate first error only */
  validateFirst?: boolean;
  /** Validate trigger */
  validateTrigger?: 'onBlur' | 'onChange' | 'onSubmit';
  /** Scroll to error */
  scrollToError?: boolean;
}

interface FormInstance {
  submit: () => void;
  validate: (name?: string) => Promise<any>;
  resetValidation: (name?: string) => void;
  getValidationStatus: () => boolean;
  scrollToField: (name: string) => void;
}

Checkbox

Checkbox component for multiple selections with group support.

import { Checkbox, CheckboxGroup } from 'vant';

interface CheckboxProps {
  /** Checked state */
  modelValue?: boolean;
  /** Checkbox name */
  name?: string | number;
  /** Checkbox shape */
  shape?: 'square' | 'round';
  /** Disabled state */
  disabled?: boolean;
  /** Label disabled */
  labelDisabled?: boolean;
  /** Label position */
  labelPosition?: 'left' | 'right';
  /** Icon size */
  iconSize?: string | number;
  /** Checked color */
  checkedColor?: string;
  /** Bind object value in group */
  bindGroup?: boolean;
  /** Indeterminate state */
  indeterminate?: boolean;
}

interface CheckboxGroupProps {
  /** Selected values */
  modelValue?: any[];
  /** Disabled state */
  disabled?: boolean;
  /** Maximum selections */
  max?: number | string;
  /** Direction */
  direction?: 'horizontal' | 'vertical';
  /** Icon size */
  iconSize?: string | number;
  /** Checked color */
  checkedColor?: string;
}

Radio

Radio button component for single selections.

import { Radio, RadioGroup } from 'vant';

interface RadioProps {
  /** Radio value */
  name?: any;
  /** Checked state */
  modelValue?: any;
  /** Disabled state */
  disabled?: boolean;
  /** Label disabled */
  labelDisabled?: boolean;
  /** Label position */
  labelPosition?: 'left' | 'right';
  /** Icon size */
  iconSize?: string | number;
  /** Checked color */
  checkedColor?: string;
  /** Radio shape */
  shape?: 'square' | 'round';
}

interface RadioGroupProps {
  /** Selected value */
  modelValue?: any;
  /** Disabled state */
  disabled?: boolean;
  /** Direction */
  direction?: 'horizontal' | 'vertical';
  /** Icon size */
  iconSize?: string | number;
  /** Checked color */
  checkedColor?: string;
}

Switch

Toggle switch component for binary states.

import { Switch } from 'vant';

interface SwitchProps {
  /** Switch state */
  modelValue?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Switch size */
  size?: string | number;
  /** Active color */
  activeColor?: string;
  /** Inactive color */
  inactiveColor?: string;
  /** Active value */
  activeValue?: any;
  /** Inactive value */
  inactiveValue?: any;
}

Stepper

Numeric stepper component for incrementing/decrementing values.

import { Stepper } from 'vant';

interface StepperProps {
  /** Current value */
  modelValue?: number | string;
  /** Minimum value */
  min?: number | string;
  /** Maximum value */
  max?: number | string;
  /** Default value */
  defaultValue?: number | string;
  /** Step size */
  step?: number | string;
  /** Input name */
  name?: string;
  /** Integer only */
  integer?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Disable plus button */
  disablePlus?: boolean;
  /** Disable minus button */
  disableMinus?: boolean;
  /** Disable input */
  disableInput?: boolean;
  /** Readonly input */
  readonly?: boolean;
  /** Input width */
  inputWidth?: string | number;
  /** Button size */
  buttonSize?: string | number;
  /** Show plus button */
  showPlus?: boolean;
  /** Show minus button */
  showMinus?: boolean;
  /** Show input */
  showInput?: boolean;
  /** Long press */
  longPress?: boolean;
  /** Allow empty */
  allowEmpty?: boolean;
  /** Placeholder */
  placeholder?: string;
}

Picker

Multi-column picker component for selecting values from predefined options.

import { Picker } from 'vant';

interface PickerProps {
  /** Picker columns */
  columns?: PickerColumn[] | PickerColumn[][];
  /** Default selected indexes */
  defaultIndex?: number | number[];
  /** Toolbar position */
  toolbarPosition?: 'top' | 'bottom';
  /** Show toolbar */
  showToolbar?: boolean;
  /** Title */
  title?: string;
  /** Confirm button text */
  confirmButtonText?: string;
  /** Cancel button text */
  cancelButtonText?: string;
  /** Loading state */
  loading?: boolean;
  /** Readonly state */
  readonly?: boolean;
  /** Item height */
  itemHeight?: number | string;
  /** Visible item count */
  visibleItemCount?: number | string;
  /** Swipe duration */
  swipeDuration?: number | string;
}

interface PickerColumn {
  text?: string;
  value?: string | number;
  disabled?: boolean;
  children?: PickerColumn[];
  className?: string;
}

interface PickerInstance {
  confirm: () => void;
  getSelectedOptions: () => PickerColumn[];
  setColumnValues: (columnIndex: number, values: PickerColumn[]) => void;
  setColumnValue: (columnIndex: number, value: string | number) => void;
  setColumnIndex: (columnIndex: number, optionIndex: number) => void;
  getColumnValue: (columnIndex: number) => string | number;
  getColumnIndex: (columnIndex: number) => number;
  getValues: () => (string | number)[];
  setValues: (values: (string | number)[]) => void;
  getIndexes: () => number[];
  setIndexes: (indexes: number[]) => void;
}

DatePicker

Date selection component with various modes and customization options.

import { DatePicker } from 'vant';

interface DatePickerProps {
  /** Selected date */
  modelValue?: Date;
  /** Picker type */
  type?: 'date' | 'time' | 'datetime' | 'datehour' | 'month-day' | 'year-month';
  /** Title */
  title?: string;
  /** Confirm button text */
  confirmButtonText?: string;
  /** Cancel button text */
  cancelButtonText?: string;
  /** Show toolbar */
  showToolbar?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Readonly state */
  readonly?: boolean;
  /** Filter options */
  filter?: (type: string, values: string[]) => string[];
  /** Formatter */
  formatter?: (type: string, value: string) => string;
  /** Columns order */
  columnsOrder?: string[];
  /** Min date */
  minDate?: Date;
  /** Max date */
  maxDate?: Date;
}

TimePicker

Time selection component for hour, minute, and second selection.

import { TimePicker } from 'vant';

interface TimePickerProps {
  /** Selected time */
  modelValue?: string;
  /** Title */
  title?: string;
  /** Confirm button text */
  confirmButtonText?: string;
  /** Cancel button text */
  cancelButtonText?: string;
  /** Show toolbar */
  showToolbar?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Readonly state */
  readonly?: boolean;
  /** Filter options */
  filter?: (type: string, values: string[]) => string[];
  /** Formatter */
  formatter?: (type: string, value: string) => string;
  /** Columns order */
  columnsOrder?: string[];
  /** Min hour */
  minHour?: number | string;
  /** Max hour */
  maxHour?: number | string;
  /** Min minute */
  minMinute?: number | string;
  /** Max minute */
  maxMinute?: number | string;
  /** Min second */
  minSecond?: number | string;
  /** Max second */
  maxSecond?: number | string;
}

Calendar

Calendar component for date range selection with various display modes.

import { Calendar } from 'vant';

interface CalendarProps {
  /** Calendar type */
  type?: 'single' | 'multiple' | 'range';
  /** Selected date(s) */
  modelValue?: Date | Date[] | null;
  /** Show calendar */
  show?: boolean;
  /** Title */
  title?: string;
  /** Subtitle */
  subtitle?: string;
  /** Color */
  color?: string;
  /** Min date */
  minDate?: Date;
  /** Max date */
  minDate?: Date;
  /** Default date */
  defaultDate?: Date | Date[] | null;
  /** Row height */
  rowHeight?: number | string;
  /** Formatter */
  formatter?: (day: CalendarDay) => CalendarDay;
  /** Poppable */
  poppable?: boolean;
  /** Lazy render */
  lazyRender?: boolean;
  /** Show mark */
  showMark?: boolean;
  /** Show title */
  showTitle?: boolean;
  /** Show subtitle */
  showSubtitle?: boolean;
  /** Show confirm */
  showConfirm?: boolean;
  /** Readonly */
  readonly?: boolean;
  /** Confirm text */
  confirmText?: string;
  /** Confirm disabled text */
  confirmDisabledText?: string;
  /** First day of week */
  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
}

interface CalendarDay {
  date?: Date;
  type?: string;
  text?: string | number;
  topInfo?: string;
  bottomInfo?: string;
  disabled?: boolean;
  className?: string;
}

Rate

Star rating component for user feedback and ratings.

import { Rate } from 'vant';

interface RateProps {
  /** Current rate */
  modelValue?: number;
  /** Star count */
  count?: number | string;
  /** Star size */
  size?: number | string;
  /** Gutter between stars */
  gutter?: number | string;
  /** Star color */
  color?: string;
  /** Void star color */
  voidColor?: string;
  /** Disabled star color */
  disabledColor?: string;
  /** Star icon */
  icon?: string;
  /** Void star icon */
  voidIcon?: string;
  /** Icon prefix */
  iconPrefix?: string;
  /** Allow half star */
  allowHalf?: boolean;
  /** Readonly state */
  readonly?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Touchable */
  touchable?: boolean;
}

Uploader

File upload component with preview and progress tracking.

import { Uploader } from 'vant';

interface UploaderProps {
  /** File list */
  modelValue?: UploaderFileListItem[];
  /** Accept file types */
  accept?: string;
  /** Maximum file count */
  maxCount?: number | string;
  /** Maximum file size */
  maxSize?: number | string;
  /** Preview size */
  previewSize?: number | string;
  /** Preview image */
  previewImage?: boolean;
  /** Preview full image */
  previewFullImage?: boolean;
  /** Multiple selection */
  multiple?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Readonly state */
  readonly?: boolean;
  /** Deletable */
  deletable?: boolean;
  /** Show upload */
  showUpload?: boolean;
  /** Capture */
  capture?: string;
  /** After read */
  afterRead?: (file: UploaderFileListItem | UploaderFileListItem[]) => void;
  /** Before read */
  beforeRead?: (file: File | File[]) => boolean | Promise<File | File[]>;
  /** Before delete */
  beforeDelete?: (file: UploaderFileListItem, detail: { name: string; index: number }) => boolean | Promise<boolean>;
  /** Upload area text */
  uploadText?: string;
  /** Upload icon */
  uploadIcon?: string;
  /** Image fit */
  imageFit?: string;
  /** Result type */
  resultType?: 'file' | 'text' | 'dataUrl';
}

interface UploaderFileListItem {
  url?: string;
  file?: File;
  content?: string;
  status?: 'uploading' | 'success' | 'failed';
  message?: string;
  name?: string;
  isImage?: boolean;
  deletable?: boolean;
  previewSize?: number | string;
  imageFit?: string;
}

Form

Form container component providing validation and field management.

import { Form } from 'vant';

interface FormProps {
  /** Colon after label */
  colon?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Label width */
  labelWidth?: string | number;
  /** Label align */
  labelAlign?: 'left' | 'center' | 'right';
  /** Input align */
  inputAlign?: 'left' | 'center' | 'right';
  /** Scroll to error field */
  scrollToError?: boolean;
  /** Validate first error only */
  validateFirst?: boolean;
  /** Submit on enter */
  submitOnEnter?: boolean;
  /** Show error */
  showError?: boolean;
  /** Show error message */
  showErrorMessage?: boolean;
  /** Validate trigger */
  validateTrigger?: 'onBlur' | 'onChange' | 'onSubmit';
}

// Events
interface FormEvents {
  /** Triggered when form is submitted */
  submit: (values: Record<string, any>) => void;
  /** Triggered when form validation fails */
  failed: (errorInfo: FormErrorInfo) => void;
}

// Instance methods
interface FormInstance {
  /** Submit form */
  submit: () => void;
  /** Validate all fields */
  validate: (name?: string | string[]) => Promise<void>;
  /** Reset all fields to initial values */
  resetValidation: (name?: string | string[]) => void;
  /** Get field values */
  getValues: () => Record<string, any>;
  /** Scroll to field */
  scrollToField: (name: string, options?: ScrollIntoViewOptions) => void;
}

interface FormErrorInfo {
  name: string;
  message: string;
}

Usage Example:

<template>
  <van-form @submit="onSubmit" @failed="onFailed">
    <van-field
      v-model="username"
      name="username"
      label="Username"
      placeholder="Username"
      :rules="[{ required: true, message: 'Please fill in username' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="Password"
      placeholder="Password"
      :rules="[{ required: true, message: 'Please fill in password' }]"
    />
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        Submit
      </van-button>
    </div>
  </van-form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Form, Field, Button } from 'vant';

const username = ref('');
const password = ref('');

const onSubmit = (values: any) => {
  console.log('submit', values);
};

const onFailed = (errorInfo: any) => {
  console.log('failed', errorInfo);
};
</script>

Cascader

Cascading selection component for hierarchical data selection.

import { Cascader } from 'vant';

interface CascaderProps {
  /** Options data */
  options: CascaderOption[];
  /** Selected value */
  modelValue?: string | number;
  /** Field names mapping */
  fieldNames?: CascaderFieldNames;
  /** Placeholder */
  placeholder?: string;
  /** Active color */
  activeColor?: string;
  /** Show header */
  showHeader?: boolean;
  /** Title */
  title?: string;
  /** Close icon */
  closeIcon?: string;
  /** Swipeable tabs */
  swipeable?: boolean;
  /** Closeable */
  closeable?: boolean;
}

interface CascaderOption {
  text: string;
  value: string | number;
  color?: string;
  disabled?: boolean;
  children?: CascaderOption[];
}

interface CascaderFieldNames {
  text?: string;
  value?: string;
  children?: string;
}

// Events
interface CascaderEvents {
  /** Triggered when selection changes */
  change: (value: string | number, selectedOptions: CascaderOption[], selectedItems: CascaderOption[]) => void;
  /** Triggered when cascade item is clicked */
  clickTab: (tabIndex: number, title: string) => void;
  /** Triggered when close button is clicked */
  close: () => void;
  /** Triggered when selection is finished */
  finish: (selectedOptions: CascaderOption[]) => void;
}

Usage Example:

<template>
  <van-cascader
    v-model="cascaderValue"
    title="Select Area"
    :options="options"
    @change="onChange"
    @finish="onFinish"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Cascader } from 'vant';

const cascaderValue = ref('');
const options = [
  {
    text: 'Zhejiang',
    value: '330000',
    children: [
      {
        text: 'Hangzhou',
        value: '330100',
        children: [
          { text: 'Xihu District', value: '330106' },
          { text: 'Yuhang District', value: '330110' },
        ],
      },
    ],
  },
];

const onChange = (value: any, selectedOptions: any) => {
  console.log('change', value, selectedOptions);
};

const onFinish = (selectedOptions: any) => {
  console.log('finish', selectedOptions);
};
</script>

Signature

Signature pad component for capturing handwritten signatures.

import { Signature } from 'vant';

interface SignatureProps {
  /** Pen color */
  penColor?: string;
  /** Line width */
  lineWidth?: number;
  /** Background color */
  backgroundColor?: string;
  /** Clear button text */
  clearButtonText?: string;
  /** Confirm button text */
  confirmButtonText?: string;
}

// Events
interface SignatureEvents {
  /** Triggered when signature is submitted */
  submit: (data: { image: string; canvas: HTMLCanvasElement }) => void;
  /** Triggered when signature is cleared */
  clear: () => void;
  /** Triggered when signature starts */
  start: () => void;
  /** Triggered when signature ends */
  end: () => void;
  /** Triggered when signing */
  signing: (event: TouchEvent) => void;
}

// Instance methods
interface SignatureInstance {
  /** Resize signature pad */
  resize: () => void;
  /** Clear signature */
  clear: () => void;
  /** Get signature data */
  submit: () => void;
}

Usage Example:

<template>
  <div>
    <van-signature 
      @submit="onSubmit" 
      @clear="onClear"
      :line-width="3"
      pen-color="#000"
    />
  </div>
</template>

<script setup lang="ts">
import { Signature } from 'vant';

const onSubmit = (data: any) => {
  console.log('Signature submitted:', data.image);
};

const onClear = () => {
  console.log('Signature cleared');
};
</script>

Install with Tessl CLI

npx tessl i tessl/npm-vant

tessl/npm-vant

form-components.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Form Components

Capabilities

Field

Form

Checkbox

Radio

Switch

Stepper

Picker

DatePicker

TimePicker

Calendar

Rate

Uploader

Form

Cascader

Signature

form-components.mddocs/