CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedCustomize
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedTemplates
  • undefinedMigration
  • undefined
  • undefined
  • undefined
undefinedDownloadundefinedHire Us Get CoreUI PRO

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Hire Us! We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.
  • Give us a star ⭐️ on Github.

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 #

<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>
1
2
3
4
5
6
7
8
9
10

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"/>
1
2
3
4
5

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/>
1
2
3
4

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

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.

<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>
1
2
3
4
5
6
7
8
9
10
11
12
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13

File input #

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Color #

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

API #

CFormInput #

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

Props #

Prop nameDescriptionTypeValuesDefault
disabledToggle 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-
idThe id global attribute defines an identifier (ID) that must be unique in the whole document.string-
invalidSet component validation state to invalid.boolean-
label
4.3.0+
Add a caption for a component.string-
model-valueThe default name for a value passed using v-model.File|number|string--
plain-textRender 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-
readonlyToggle the readonly state for the component.boolean-
sizeSize 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-
typeSpecifies the type of component.string'color' | 'file' | 'text' | string'text'
validSet component validation state to valid.boolean-

Events #

Event nameDescriptionProperties
changeEvent occurs when the element loses focus, after the content has been changed.
inputEvent occurs immediately after the value of a component has changed.
update:modelValueEmit 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'
1
2
3

Props #

Prop nameDescriptionTypeValuesDefault
disabledToggle 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-
idThe id global attribute defines an identifier (ID) that must be unique in the whole document.string-
invalidSet component validation state to invalid.boolean-
label
4.3.0+
Add a caption for a component.string-
model-valueThe default name for a value passed using v-model.string--
plain-textRender 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-
readonlyToggle 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-
validSet component validation state to valid.boolean-

Events #

Event nameDescriptionProperties
changeEvent occurs when the element loses focus, after the content has been changed.
inputEvent occurs immediately after the value of a component has changed.
update:modelValueEmit the new value whenever there’s an input or change event.
On this page
  • Example
  • Sizing
  • Disabled
  • Readonly
  • Readonly plain text
  • File input
  • Color
  • API
    • CFormInput
    • CFormTextarea
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.