Form

wovoui's form component and helper components that optionally support inline form styles and validation states. Pair them up with other BootstrapVue form control components for an easy customized, and responsive, layout with a consistent look and feel.

Introduction to forms and controls

Be sure to use an appropriate type on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Here's a quick example to demonstrate BootstrapVue's form styles. Keep reading for documentation on supported components, form layout, and more.

Form Example

Email

Phone

Form Data Result

{
  "email": "",
  "phone": ""
}

<template>
    <Card header="Form Example">
        <form>
            <FormGroup label="Email">
                <Input type="email" v-model="form1.email" placeholder="Email Address"></Input>
            </FormGroup>
            <FormGroup label="Phone">
                <Input type="tel" v-model="form1.phone" placeholder="Phone Number"></Input>
            </FormGroup>
            <Button class="w-100 mt-3" variant="dark">SUBMIT</Button>
        </form>
    </Card>

    <Card header="Form Data Result">
        <pre>{{JSON.parse(JSON.stringify(form1,null,'\n'))}}</pre>
    </Card>
    
</template>
<script setup>
import {reactive} from "vue";

const form1 = reactive({
    email: "",
    phone: ""
});
</script>