Bootstrap Vue Form Controls
Bootstrap 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.
On this page
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
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
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
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
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
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
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
2
API
CFormInput
import { CFormInput } from '@coreui/bootstrap-vue'
// or
import CFormInput from '@coreui/bootstrap-vue/src/components/form/CFormInput'
1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| disabled | Toggle the disabled state for the component. | boolean | - | |
| invalid | Set component validation state to invalid. | boolean | - | |
| 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 | - | |
| size | Size the component small or large. | string | 'sm' | 'lg' | - |
| 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. |
CFormTextarea
import { CFormTextarea } from '@coreui/bootstrap-vue'
// or
import CFormTextarea from '@coreui/bootstrap-vue/src/components/form/CFormTextarea'
1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| disabled | Toggle the disabled state for the component. | boolean | - | |
| invalid | Set component validation state to invalid. | boolean | - | |
| 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 | - | |
| 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. |