Vue Form Input

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

Example #

Email address

Must be 8-20 characters long.

<CForm>
  <CFormInput
    type="email"
    id="exampleFormControlInput1"
    label="Email address"
    placeholder="[email protected]"
    text="Must be 8-20 characters long."
    aria-describedby="exampleFormControlInputHelpInline"
  />
</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.

<CForm>
  <CFormLabel for="exampleFormControlInput1">Email address</CFormLabel>
  <CFormInput type="email" id="exampleFormControlInput1" placeholder="[email protected]" aria-describedby="exampleFormControlInputHelpInline" />
  <CFormText component="span" id="exampleFormControlInputHelpInline">
    Must be 8-20 characters long.
  </CFormText>
</CForm>

You can also use slots.

<CFormInput
  type="email"
  id="exampleFormControlInput1"
  placeholder="[email protected]"
  aria-describedby="exampleFormControlInputHelpInline"
>
  <template #label>Email address</template>
  <template #text>Must be 8-20 characters long.</template>
</CFormInput>

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"/>
<CFormInput type="text" placeholder="Default input" aria-label="default input example"/>
<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

<CFormInput type="file" id="formFile" label="Default file input example" />
<CFormInput type="file" id="formFileMultiple" label="Multiple files input example" multiple />
<CFormInput type="file" id="formFileDisabled" label="Disabled file input example" disabled />
<CFormInput type="file" size="sm" id="formFileSm" label="Small file input example" />
<CFormInput type="file" size="lg" id="formFileLg" label="Large file input example" />

Color #

Color picker

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

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.false	string	-
feedback-invalid 4.3.0+	Provide valuable, actionable feedback.false	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.false	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.false	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.false	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.false	string	-
tooltip-feedback 4.3.0+	Display validation feedback in a styled tooltip.false	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-model-value	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'