Vue Bootstrap Form input Component

Form input 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 use CoreUI’s Vue Form input component with Bootstrap styles for flexible, framework-consistent UI.

On this page

Example

vue

<template>
  <CForm>
    <CFormInput
      type="email"
      id="exampleFormControlInput1"
      label="Email address"
      placeholder="[email protected]"
      text="Must be 8-20 characters long."
      aria-describedby="exampleFormControlInputHelpInline"
    />
  </CForm>
</template>

<script setup>
import { CForm, CFormInput } from '@coreui/vue'
</script>

If you need to add custom classs to form’s components, or need to add some custom elements you can add each form component separately. Please check the example below.

<CForm>
  <CFormLabel for="exampleFormControlInput1">Email address</CFormLabel>
  <CFormInput type="email" id="exampleFormControlInput1" placeholder="[email protected]" aria-describedby="exampleFormControlInputHelpInline" />
  <CFormText as="span" id="exampleFormControlInputHelpInline">
    Must be 8-20 characters long.
  </CFormText>
</CForm>

You can also use slots.

<CFormInput
  type="email"
  id="exampleFormControlInput1"
  placeholder="[email protected]"
  aria-describedby="exampleFormControlInputHelpInline"
>
  <template #label>Email address</template>
  <template #text>Must be 8-20 characters long.</template>
</CFormInput>

Sizing

Set heights using size property like size="lg" and size="sm".

vue

<template>
  <CFormInput
    type="text"
    class="mb-3"
    size="lg"
    placeholder="Large input"
    aria-label="lg input example"
  />
  <CFormInput
    type="text"
    class="mb-3"
    placeholder="Default input"
    aria-label="default input example"
  />
  <CFormInput
    type="text"
    class="mb-3"
    size="sm"
    placeholder="Small input"
    aria-label="sm input example"
  />
</template>

<script setup>
import { CFormInput } from '@coreui/vue'
</script>

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

vue

<template>
  <CFormInput
    type="text"
    placeholder="Disabled input"
    aria-label="Disabled input example"
    disabled
  />
  <br />
  <CFormInput
    type="text"
    placeholder="Disabled readonly input"
    aria-label="Disabled input example"
    disabled
    readonly
  />
  <br />
</template>

<script setup>
import { CFormInput } from '@coreui/vue'
</script>

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

vue

<template>
  <CFormInput
    type="text"
    placeholder="Readonly input here..."
    aria-label="readonly input example"
    readonly
  />
</template>

<script setup>
import { CFormInput } from '@coreui/vue'
</script>

Readonly plain text

If you want to have <input readonly> elements in your form styled as plain text, use the plain-text boolean property to remove the default form field styling and preserve the correct margin and padding.

vue

<template>
  <CRow class="mb-3">
    <CFormLabel for="staticEmail" class="col-sm-2 col-form-label">Email</CFormLabel>
    <div class="col-sm-10">
      <CFormInput type="text" id="staticEmail" value="[email protected]" readonly plain-text />
    </div>
  </CRow>
  <CRow class="mb-3">
    <CFormLabel for="inputPassword" class="col-sm-2 col-form-label">Password</CFormLabel>
    <div class="col-sm-10">
      <CFormInput type="password" id="inputPassword" />
    </div>
  </CRow>
</template>

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

vue

<template>
  <CForm class="row g-3">
    <div class="col-auto">
      <CFormLabel for="staticEmail2" class="visually-hidden">Email</CFormLabel>
      <CFormInput type="text" id="staticEmail2" value="[email protected]" readonly plain-text />
    </div>
    <div class="col-auto">
      <CFormLabel for="inputPassword2" class="visually-hidden">Password</CFormLabel>
      <CFormInput type="password" id="inputPassword2" placeholder="Password" />
    </div>
    <div class="col-auto">
      <CButton type="submit" color="primary" class="mb-3">Confirm identity</CButton>
    </div>
  </CForm>
</template>

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

File input

vue

<template>
  <div class="mb-3">
    <CFormInput type="file" id="formFile" label="Default file input example" />
  </div>
  <div class="mb-3">
    <CFormInput type="file" id="formFileMultiple" label="Multiple files input example" multiple />
  </div>
  <div class="mb-3">
    <CFormInput type="file" id="formFileDisabled" label="Disabled file input example" disabled />
  </div>
  <div class="mb-3">
    <CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
  </div>
  <div>
    <CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />
  </div>
</template>

<script setup>
import { CFormInput } from '@coreui/vue'
</script>

Color

vue

<template>
  <CFormInput
    type="color"
    id="exampleColorInput"
    label="Color picker"
    title="Choose your color"
    value="#563d7c"
  />
</template>

<script setup>
import { CFormInput } from '@coreui/vue'
</script>