Vue Form Text Component

Form control

Vue textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.

Available in Other JavaScript Frameworks

CoreUI Vue Form Text Component is also available for Angular, Bootstrap, and React. Explore framework-specific implementations below:

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>