Vue Form Controls

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

Example #

Email address

Example textarea

<CForm>
  <div class="mb-3">
    <CFormLabel for="exampleFormControlInput1">Email address</CFormLabel>
    <CFormInput type="email" id="exampleFormControlInput1" placeholder="[email protected]"/>
  </div>
  <div class="mb-3">
    <CFormLabel for="exampleFormControlTextarea1">Example textarea</CFormLabel>
    <CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
  </div>
</CForm>

Sizing #

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

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

Disabled #

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

<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/>

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.

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

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.

Email

Password

<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>

Email

Password

<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>

File input #

Default file input example

Multiple files input example

Disabled file input example

Small file input example

Large file input example

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

Color #

Color picker

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

API #

CFormInput #

import { CFormInput } from '@coreui/vue'
// or
import CFormInput from '@coreui/vue/src/components/form/CFormInput'

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.	File|number|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	-
size	Size the component small or large.	string	'sm' | 'lg'
text 4.3.0+	Add helper text to the component.	string	-
tooltip-feedback 4.3.0+	Display validation feedback in a styled tooltip.	boolean	-
type	Specifies the type of component.	string	'color' | 'file' | 'text' | string	'text'
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.

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.