Vue Form Input

Vue input components. Give textual form `<input>`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>
  <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.

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>

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

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;

$form-file-* are for file input.

$form-file-button-color:          $input-color !default;
$form-file-button-bg:             $input-group-addon-bg !default;
$form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%) !default;

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.

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'

On this page

Vue Form Input

Other frameworks

Example #

Sizing #

Disabled #

Readonly #

Readonly plain text #

File input #

Color #

Customizing #

SASS variables #

API #

CFormInput #

Props #

Events #

CFormFeedback #

Props #

CFormLabel #

Props #

CFormText #

Props #

Example

Sizing

Disabled

Readonly

Readonly plain text

File input

Color

Customizing

SASS variables

API

CFormInput

Props

Events

CFormFeedback

Props

CFormLabel

Props

CFormText

Props