Form

Collect and validate user input with form items.

Basic Usage

* ID

Name

Description

test description

Number

Sex

MaleFemale

Hobbits

test1

test2

test3

Is Student

Time

<template>
  <bp-form ref="formRef" :model="form" label-position="right" :rules label-width="100px">
    <bp-form-item label="ID" field="id" required>
      <bp-input id="id" v-model="form.id" placeholder="Please enter" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Name" field="name">
      <bp-input v-model="form.name" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Description" field="description">
      <bp-textarea v-model="form.description" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Number" field="number">
      <bp-input-number v-model="form.number" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Sex" field="sex">
      <bp-radio-group v-model="form.sex" style="width: 320px">
        <bp-radio value="male">Male</bp-radio>
        <bp-radio value="female">Female</bp-radio>
      </bp-radio-group>
    </bp-form-item>
    <bp-form-item label="Hobbits" field="hobbits">
      <bp-checkbox-group v-model="form.hobbits" style="width: 320px">
        <bp-checkbox value="test1">test1</bp-checkbox>
        <bp-checkbox value="test2">test2</bp-checkbox>
        <bp-checkbox value="test3">test3</bp-checkbox>
      </bp-checkbox-group>
    </bp-form-item>
    <bp-form-item label="Is Student" field="isStudent">
      <bp-switch v-model="form.isStudent" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Time" field="createTime">
      <bp-date-picker v-model="form.createTime" style="width: 320px" />
    </bp-form-item>
    <bp-form-item>
      <bp-button type="plain" status="primary" @click="validate">Submit</bp-button>
    </bp-form-item>
  </bp-form>
</template>

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

const form = ref<any>({
  id: "",
  name: "test",
  description: "test description",
  number: 100,
  sex: "male",
  hobbits: ["test1", "test3"],
  isStudent: true,
  createTime: "2024-01-01 12:00:00",
});

const rules = ref<any>({
  id: [{ required: true, message: "Enter ID" }],
});

const formRef = ref<any>(null);
const validate = async () => {
  await formRef.value.validate();
};
</script>

Validation

Validate with rules, validate(), and resetFields().

* Username

* Email

* Password

<template>
  <bp-form ref="formRef" :model="form" :rules="rules" label-width="100px">
    <bp-form-item label="Username" field="username" required>
      <bp-input v-model="form.username" placeholder="Enter username" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Email" field="email" required>
      <bp-input v-model="form.email" placeholder="Enter email" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Password" field="password" required>
      <bp-input v-model="form.password" type="password" placeholder="Enter password" style="width: 320px" />
    </bp-form-item>
    <bp-form-item>
      <div>
        <bp-button status="primary" @click="handleSubmit">Submit</bp-button>
        <bp-button type="plain" @click="handleReset" style="margin-left: 8px">Reset</bp-button>
      </div>
    </bp-form-item>
  </bp-form>
</template>

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

const form = ref({
  username: "",
  email: "",
  password: "",
});

const rules = ref({
  username: [
    { required: true, message: "Enter username" },
    { min: 3, max: 16, message: "Username must be 3–16 characters" },
  ],
  email: [
    { required: true, message: "Enter email" },
    { type: "email", message: "Enter a valid email address" },
  ],
  password: [
    { required: true, message: "Enter password" },
    { min: 6, message: "Password must be at least 6 characters" },
  ],
});

const formRef = ref<any>(null);

const handleSubmit = async () => {
  const valid = await formRef.value.validate();
  if (valid) {
    alert("Submitted!");
  }
};

const handleReset = () => {
  formRef.value.resetFields();
  formRef.value.clearValidate();
};
</script>

Label Position

label-position supports left, right, and top.

leftrighttop

Name

Email

<template>
  <div>
    <bp-radio-group v-model="position" type="button" style="margin-bottom: 20px">
      <bp-radio value="left">left</bp-radio>
      <bp-radio value="right">right</bp-radio>
      <bp-radio value="top">top</bp-radio>
    </bp-radio-group>

    <bp-form :model="form" :label-position="position" label-width="80px">
      <bp-form-item label="Name">
        <bp-input v-model="form.name" style="width: 320px" />
      </bp-form-item>
      <bp-form-item label="Email">
        <bp-input v-model="form.email" style="width: 320px" />
      </bp-form-item>
    </bp-form>
  </div>
</template>

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

const position = ref<"left" | "right" | "top">("right");

const form = ref({
  name: "",
  email: "",
});
</script>

Inline Layout

Use layout="inline" for a compact row.

Name

City

<template>
  <bp-form :model="form" layout="inline" label-width="60px">
    <bp-form-item label="Name">
      <bp-input v-model="form.name" placeholder="Please enter" />
    </bp-form-item>
    <bp-form-item label="City">
      <bp-input v-model="form.city" placeholder="Please enter" />
    </bp-form-item>
    <bp-form-item>
      <bp-button status="primary" size="small">Query</bp-button>
    </bp-form-item>
  </bp-form>
</template>

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

const form = ref({
  name: "",
  city: "",
});
</script>

Reset and Clear

Reset values with resetFields() or clear errors with clearValidate().

* Username

Bio

This is a short bio

Age

<template>
  <bp-form ref="formRef" :model="form" :rules="rules" label-width="100px">
    <bp-form-item label="Username" field="username" required>
      <bp-input v-model="form.username" placeholder="Enter username" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Bio" field="bio">
      <bp-textarea v-model="form.bio" placeholder="Enter bio" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Age" field="age">
      <bp-input-number v-model="form.age" :min="0" :max="150" style="width: 320px" />
    </bp-form-item>
    <bp-form-item>
      <div>
        <bp-button status="primary" @click="handleValidate">Validate</bp-button>
        <bp-button type="plain" @click="handleReset" style="margin-left: 8px">Reset</bp-button>
        <bp-button type="plain" status="warning" @click="handleClear" style="margin-left: 8px">Clear validation</bp-button>
      </div>
    </bp-form-item>
  </bp-form>
</template>

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

const form = ref({
  username: "Zhang San",
  bio: "This is a short bio",
  age: 25,
});

const rules = ref({
  username: [{ required: true, message: "Enter username" }],
});

const formRef = ref<any>(null);

const handleValidate = async () => {
  await formRef.value.validate();
};

const handleReset = () => {
  formRef.value.resetFields();
};

const handleClear = () => {
  formRef.value.clearValidate();
};
</script>

Auto Validate

Use FormItem auto-validate, show-colon, and width.

* Username

* Email

* Show colon :

Custom width

<template>
  <bp-form :model="form" :rules="rules" label-width="100px">
    <bp-form-item label="Username" field="username" required auto-validate>
      <bp-input v-model="form.username" placeholder="Validate on blur after input" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Email" field="email" required auto-validate>
      <bp-input v-model="form.email" placeholder="Validate on blur after input" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Show colon" field="colon" required show-colon>
      <bp-input v-model="form.colon" style="width: 320px" />
    </bp-form-item>
    <bp-form-item label="Custom width" field="custom" :width="'120px'">
      <bp-input v-model="form.custom" style="width: 320px" />
    </bp-form-item>
  </bp-form>
</template>

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

const form = ref({
  username: "",
  email: "",
  colon: "",
  custom: "",
});

const rules = ref({
  username: [
    { required: true, message: "Enter username" },
    { min: 3, message: "At least 3 characters" },
  ],
  email: [
    { required: true, message: "Enter email" },
    { type: "email", message: "Invalid email format" },
  ],
});
</script>

Form Props

model	Form model	Object	-	-
rules	Validation rules	Rules	-	-
label-width	Label width	StringNumber	80px	-
label-position	Label position	String	right	-
layout	Form layout	String	vertical	-

FormItem Props

label	Label text	String	-	-
field	Field name	String	-	-
required	Whether required	Boolean	-	-
width	Label width	StringNumber	-	-
show-colon	Whether to show a colon	Boolean	-	-
rules	Form item validation rules	Rules	-	-
auto-validate	Validate on blur	Boolean	-	-

Form Events

submit

Triggered on submit

{ isValid: Boolean, model: Object }

-

Form Methods

validate	Validate the form	-	Promise<Boolean>	-
clearValidate	Clear validation results	fields?: string[]	-	-
resetFields	Reset field values	-	-	-

Form Slots

default

Form content

-

-

FormItem Slots

default

Form item content

-

-