Form 表单

Form · Display component

Form rules and validation.

On-demand importwbbb-ui/components/form

Basic Usage

Example code

<script setup lang="ts">
import { WbbbForm } from 'wbbb-ui/components/form'
import 'wbbb-ui/styles/form'
</script>

<template>
  <WbbbForm />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultFilledFocusDisabledError

API Reference

Props

Property	Description	Type	Default	Required
disabled	Prevents user interaction with the component.	boolean	false	No
labelWidth	Sets the width reserved for field labels.	WbbbNumeric	160	No
model	Provides the data model used by the component.	Record<string, unknown>	() => ({})	No
rules	Provides validation rules for the form or field.	Record<string, WbbbFormRule \| WbbbFormRule[]>	() => ({})	No

Events

None

Slots

• default

Two-way binding

Does not support v-model.

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: The existing rule API remains compatible and uses async-validator internally. Call validate() to obtain the validation result.