Form

Container for collecting data to submit.

Basic usage

Name (optional)

Email *

Email is unique

Password

---

<template>
  <b-row justify="center">
    <b-col span="12" :md="6">
      <b-card bordered>
        <b-form @submit.prevent="handleSubmit" @reset.prevent="handleReset">
          <b-form-item label="Name" topless optional>
            <b-input v-model="formData.name" />
          </b-form-item>
          <b-form-item label="Email" help-text="Email is unique" required>
            <b-input v-model="formData.email" />
          </b-form-item>
          <b-form-item label="Password" :error="error">
            <b-input v-model="formData.password" show-password />
          </b-form-item>
          <div class="flex justify-end mt-6">
            <b-button native-type="reset" class="mr-4">Reset</b-button>
            <b-button primary native-type="submit">Submit</b-button>
          </div>
        </b-form>
      </b-card>
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const formData = reactive({
  name: 'Black Panther',
  email: 'black.panther@wakanda.com',
  password: '',
})

const error = ref('')

const handleSubmit = () => {
  // eslint-disable-next-line no-console
  console.log('form submitted!')

  if (formData.password === '') {
    error.value = 'Password is required'
  }
}

const handleReset = () => {
  error.value = ''
  formData.name = 'Black Panther'
  formData.email = 'black.panther@wakanda.com'
  formData.password = ''
}
</script>

Validation

We use vuelidate for data validation.

Name

Email

Email is unique

Password

---

<template>
  <b-row justify="center">
    <b-col span="12" :md="6">
      <b-card bordered>
        <b-form @submit.prevent="handleSubmit" @reset.prevent="handleReset">
          <b-form-item label="Name" topless :error="validationMessage('name')">
            <b-input v-model="formData.name" />
          </b-form-item>
          <b-form-item
            label="Email"
            help-text="Email is unique"
            :error="validationMessage('email')"
          >
            <b-input v-model="formData.email" />
          </b-form-item>
          <b-form-item label="Password" :error="validationMessage('password')">
            <b-input v-model="formData.password" show-password />
          </b-form-item>
          <div class="flex justify-end mt-6">
            <b-button native-type="reset" class="mr-4">Reset</b-button>
            <b-button primary native-type="submit">Submit</b-button>
          </div>
        </b-form>
      </b-card>
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { email, maxLength, minLength, required } from '@vuelidate/validators'
import { useValidationMessage } from '../../.vuepress/composables/vuelidate'

const formData = reactive({
  name: 'Black Panther',
  email: 'black.panther@wakanda.com',
  password: '',
})

const rules = {
  name: {
    required,
    minLength: minLength(6),
    maxLength: maxLength(12),
  },
  email: {
    required,
    email,
  },
  password: {
    required,
    minLength: minLength(6),
  },
}

const v$ = useVuelidate(rules, formData)
const { validationMessage } = useValidationMessage(v$)

const handleSubmit = () => {
  v$.value.$touch()

  if (v$.value.$invalid) {
    // eslint-disable-next-line no-console
    console.log('Form submited!')
  }
}

const handleReset = () => {
  v$.value.$reset()
  formData.email = 'black.panther@wakanda.com'
  formData.name = 'Black Panther'
  formData.password = ''
}
</script>

Form Item Attributes

Attribute	Description	Type	Default
label	Label text.	string	—
required	Whether the field is required or not.	boolean	false
optional	Whether the field is optional.	boolean	false
help-text	Additional helper text.	string	—
error	Field error message, set its value and the field will validate error and show this message immediately.	string	—
size	Control the size of components in this form-item.	large / default / small	default

Form Item Slots

Name	Description	Slot Scope
—	Content of Form Item.	—
label	Custom content to display on label.	{ label }