Vue Bootstrap Form Field Component

Form Field with Bootstrap Styling

Bootstrap 5 components designed for Vue.js

This component is part of the CoreUI for Vue.js UI components library, which offers all Bootstrap components designed to work seamlessly with Vue.js.

If you want to use Bootstrap 5 in a Vue.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to lay out Bootstrap-styled form controls with their labels and descriptions using CoreUI's Vue Form Field component.

On this page

How to use Vue Bootstrap Form Field component

Use CoreUI’s <CFormField> to stack a Bootstrap-styled control with its label and description in one consistent layout. The wrapper is a CSS grid: everything stacks in a single column, and a check control switches the field to a two-column layout with the control pinned beside its text.

vue

<template>
  <CFormField>
    <CFormLabel for="fieldText">Email address</CFormLabel>
    <CFormInput id="fieldText" type="email" placeholder="[email protected]" />
    <CFormText>We'll never share your email with anyone else.</CFormText>
  </CFormField>
</template>

<script setup>
import { CFormField, CFormInput, CFormLabel, CFormText } from '@coreui/vue'
</script>

With a checkbox

vue

<template>
  <CFormField>
    <CCheckbox id="fieldCheck" label="Subscribe to the newsletter" />
    <CFormText>We send one email a month, and never share your address.</CFormText>
  </CFormField>
</template>

<script setup>
import { CCheckbox, CFormField, CFormText } from '@coreui/vue'
</script>