Vue Form Text Component
Vue textarea components. Give textual form `<textarea>`s an upgrade with custom styles, sizing, focus states, validation, and more.
Other frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.
Example
<CForm>
<CFormTextarea
id="exampleFormControlTextarea1"
label="Example textarea"
rows="3"
text="Must be 8-20 words long."
></CFormTextarea>
</CForm>
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 component="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.
<CFormTextarea
class="mb-3"
placeholder="Disabled textarea"
aria-label="Disabled textarea example"
disabled>
</CFormTextarea>
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.
<CFormTextarea
placeholder="Readonly textarea"
aria-label="Readonly textarea example"
disabled
readonly
></CFormTextarea>
Customizing
SASS variables
$input-*
are shared across most of our form controls (and not buttons).
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-font-size-sm: $input-btn-font-size-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: $body-bg !default;
$input-disabled-color: null !default;
$input-disabled-bg: $gray-200 !default;
$input-disabled-border-color: $gray-400 !default;
$input-color: $body-color !default;
$input-border-color: $gray-400 !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;
$input-border-radius: $border-radius !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: $gray-600 !default;
$input-plaintext-color: $body-color !default;
$input-height-border: $input-border-width * 2 !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-color-width: 3rem !default;
$form-label-*
and $form-text-*
are for our <CFormLabel />
s and <CFormText />
component.
$form-label-margin-bottom: .5rem !default;
$form-label-font-size: null !default;
$form-label-font-style: null !default;
$form-label-font-weight: null !default;
$form-label-color: null !default;
$form-text-margin-top: .25rem !default;
$form-text-font-size: $small-font-size !default;
$form-text-font-style: null !default;
$form-text-font-weight: null !default;
$form-text-color: $text-muted !default;
API
CFormTextarea
import { CFormTextarea } from '@coreui/vue'
// or
import CFormTextarea from '@coreui/vue/src/components/form/CFormTextarea'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
disabled | Toggle the disabled state for the component. | boolean | - | - |
feedback 4.3.0+ | Provide valuable, actionable feedback. | string | - | - |
feedback-invalid 4.3.0+ | Provide valuable, actionable feedback. | string | - | - |
feedback-valid 4.3.0+ | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid . | string | - | - |
floating-label 4.3.0+ | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid . | string | - | - |
id | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - |
invalid | Set component validation state to invalid. | boolean | - | - |
label 4.3.0+ | Add a caption for a component. | string | - | - |
model-value | The default name for a value passed using v-model. | string | - | - |
plain-text | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side readonly . | boolean | - | - |
readonly | Toggle the readonly state for the component. | boolean | - | - |
text 4.3.0+ | Add helper text to the component. | string | - | - |
tooltip-feedback 4.3.0+ | Display validation feedback in a styled tooltip. | boolean | - | - |
valid | Set component validation state to valid. | boolean | - | - |
Events
Event name | Description | Properties |
---|---|---|
change | Event occurs when the element loses focus, after the content has been changed. | |
input | Event occurs immediately after the value of a component has changed. | |
update:modelValue | Emit the new value whenever there’s an input or change event. |
CFormFeedback
import { CFormFeedback } from '@coreui/vue'
// or
import CFormFeedback from '@coreui/vue/src/components/form/CFormFeedback'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
component | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' |
invalid | Method called immediately after the value prop changes. | boolean | - | - |
tooltip | If your form layout allows it, you can display validation feedback in a styled tooltip. | boolean | - | - |
valid | Set component validation state to valid. | boolean | - | - |
CFormLabel
import { CFormLabel } from '@coreui/vue'
// or
import CFormLabel from '@coreui/vue/src/components/form/CFormLabel'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
custom-class-name | A string of all className you want to be applied to the component, and override standard className value. | array|string | - | - |
CFormText
import { CFormText } from '@coreui/vue'
// or
import CFormText from '@coreui/vue/src/components/form/CFormText'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
component | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'div' |