Vue Form control Component API

Form control API

Explore the API reference for the Vue Form control component and discover how to effectively utilize its props for customization.

On this page

CFormTextarea

jsx

import { CFormTextarea } from '@coreui/vue'

Props

Property	Default	Type
disabled	-	`boolean`
Toggle the disabled state for the component.
feedback4.3.0+	-	`string`
Provide valuable, actionable feedback.
feedbackInvalid4.3.0+	-	`string`
Provide valuable, actionable feedback.
feedbackValid4.3.0+	-	`string`
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
floatingLabel4.3.0+	-	`string`
Provide a floating label for the component — the text rests inside the field and floats once it has focus or a value.
floatingLabelAlways6.0.0+	-	`boolean`
Keeps the floating label floated and the placeholder visible while the field is empty.
id	-	`string`
The id global attribute defines an identifier (ID) that must be unique in the whole document.
invalidDeprecated 6.0.0	-	`boolean`
Mark the control invalid. Use `validationState="invalid"` instead — `invalid` is ignored when `validationState` is set.
label4.3.0+	-	`string`
Add a caption for a component.
modelValue	-	`string`
The default name for a value passed using v-model.
plainText	-	`boolean`
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`.
readonly	-	`boolean`
Toggle the readonly state for the component.
text4.3.0+	-	`string`
Add helper text to the component.
tooltipFeedback4.3.0+	-	`boolean`
Display validation feedback in a styled tooltip.
validDeprecated 6.0.0	-	`boolean`
Mark the control valid. Use `validationState="valid"` instead — `valid` is ignored when `validationState` is set.
validationState6.0.0+	-	`string`
The validation state, rendered as the `is-{state}` class; `'invalid'` also sets `aria-invalid` and blocks the submit. Any custom state declared in the `$form-validation-states` Sass map is accepted. The user's next change of the value emits `update:validationState` with `undefined`.

Events

Event name
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.
update:validationState
Event occurs with `undefined` when the user changes the value, or the form is reset, while `validationState` (or the deprecated `invalid`) is set. A given state is a verdict on the value it was given for; bind it with `v-model:validation-state` to drop it and let the browser's own validation show again.

CFormFeedback

jsx

import { CFormFeedback } from '@coreui/vue'

Property	Default	Type
as	`'div'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.
invalidDeprecated 6.0.0	-	`boolean`
Style the feedback as the invalid message. Use `validationState="invalid"` instead — `invalid` is ignored when `validationState` is set.
tooltip	-	`boolean`
If your form layout allows it, you can display validation feedback in a styled tooltip.
validDeprecated 6.0.0	-	`boolean`
Style the feedback as the valid message. Use `validationState="valid"` instead — `valid` is ignored when `validationState` is set.
validationState6.0.0+	-	`string`
The validation state this feedback belongs to, rendered as the `{state}-feedback` (or `{state}-tooltip`) class. Any custom state declared in the `$form-validation-states` Sass map is accepted.

CFormLabel

jsx

import { CFormLabel } from '@coreui/vue'

CFormText

jsx

import { CFormText } from '@coreui/vue'

Property	Default	Type
as	`'div'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.