Vue Bootstrap Form control Component

Form control 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 control component with Bootstrap styles for flexible, framework-consistent UI.

On this page

Example

vue

<template>
  <CFormTextarea
    id="exampleFormControlTextarea1"
    label="Example textarea"
    rows="3"
    text="Must be 8-20 words long."
  ></CFormTextarea>
</template>

<script setup>
import { CFormTextarea } 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.

<CFormLabel for="exampleFormControlTextarea1">Example textarea</CFormLabel>
<CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
<CFormText as="span" id="passwordHelpInline">Must be 8-20 words long.</CFormText>

You can also use slots.

<CFormTextarea id="exampleFormControlTextarea1" rows="3">
  <template #label>Example textarea</template>
  <template #text>Must be 8-20 word long.</template>
</CFormTextarea>

Disabled

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

vue

<template>
  <CFormTextarea
    class="mb-3"
    placeholder="Disabled textarea"
    aria-label="Disabled textarea example"
    disabled
  ></CFormTextarea>
</template>

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

Readonly

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

vue

<template>
  <CFormTextarea
    placeholder="Readonly textarea"
    aria-label="Readonly textarea example"
    disabled
    readonly
  ></CFormTextarea>
</template>

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