CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedMigration
If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️ undefined Star🙏
  • undefined
  • undefined

Vue Input Group Component

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Basic example #

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <CFormLabel>s outside the input group.

@
@example.com
https://example.com/users/
$.00
@
With textarea
<CInputGroup class="mb-3">
  <CInputGroupText id="basic-addon1">@</CInputGroupText>
  <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
</CInputGroup>
<CInputGroup class="mb-3">
  <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
  <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
</CInputGroup>
<CFormLabel for="basic-url">Your vanity URL</CFormLabel>
<CInputGroup class="mb-3">
  <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
  <CFormInput id="basic-url" aria-describedby="basic-addon3"/>
</CInputGroup>
<CInputGroup class="mb-3">
  <CInputGroupText>$</CInputGroupText>
  <CFormInput aria-label="Amount (to the nearest dollar)"/>
  <CInputGroupText>.00</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
  <CFormInput placeholder="Username" aria-label="Username"/>
  <CInputGroupText>@</CInputGroupText>
  <CFormInput placeholder="Server" aria-label="Server"/>
</CInputGroup>
<CInputGroup>
  <CInputGroupText>With textarea</CInputGroupText>
  <CFormTextarea aria-label="With textarea"></CFormTextarea>
</CInputGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Wrapping #

Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with .flex-nowrap.

@
<CInputGroup class="flex-nowrap">
  <CInputGroupText id="addon-wrapping">@</CInputGroupText>
  <CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping"/>
</CInputGroup>
1
2
3
4

Sizing #

Add the relative form sizing classes to the <CInputGroup> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Sizing on the individual input group elements isn't supported.

Small
Default
Large
<CInputGroup size="sm" class="mb-3">
  <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
  <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
</CInputGroup>
<CInputGroup class="mb-3">
  <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
  <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
</CInputGroup>
<CInputGroup size="lg">
  <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
  <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
</CInputGroup>
1
2
3
4
5
6
7
8
9
10
11
12

Checkboxes and radios #

Place any checkbox or radio option within an input group's addon instead of text.

<CInputGroup class="mb-3">
  <CInputGroupText>
    <CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input"/>
  </CInputGroupText>
  <CFormInput aria-label="Text input with checkbox"/>
</CInputGroup>
<CInputGroup>
  <CInputGroupText>
    <CFormCheck type="radio" value="" aria-label="Radio button for following text input"/>
  </CInputGroupText>
  <CFormInput aria-label="Text input with radio button"/>
</CInputGroup>
1
2
3
4
5
6
7
8
9
10
11
12

Multiple inputs #

While multiple <CFormInput>s are supported visually, validation styles are only available for input groups with a single <CFormInput>.

First and last name
<CInputGroup>
  <CInputGroupText>First and last name</CInputGroupText>
  <CFormInput aria-label="First name"/>
  <CFormInput aria-label="Last name"/>
</CInputGroup>
1
2
3
4
5

Multiple addons #

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

$0.00
$0.00
<CInputGroup class="mb-3">
  <CInputGroupText>$</CInputGroupText>
  <CInputGroupText>0.00</CInputGroupText>
  <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
</CInputGroup>
<CInputGroup>
  <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
  <CInputGroupText>$</CInputGroupText>
  <CInputGroupText>0.00</CInputGroupText>
</CInputGroup>
1
2
3
4
5
6
7
8
9
10

Button addons #

<CInputGroup class="mb-3">
  <CButton type="button" color="secondary" variant="outline" id="button-addon1">Button</CButton>
  <CFormInput placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"/>
</CInputGroup>
<CInputGroup class="mb-3">
  <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"/>
  <CButton type="button" color="secondary" variant="outline" id="button-addon2">Button</CButton>
</CInputGroup>
<CInputGroup class="mb-3">
  <CButton type="button" color="secondary" variant="outline">Button</CButton>
  <CButton type="button" color="secondary" variant="outline">Button</CButton>
  <CFormInput placeholder="" aria-label="Example text with two button addons"/>
</CInputGroup>
<CInputGroup>
  <CFormInput placeholder="Recipient's username" aria-label="Recipient's username with two button addons"/>
  <CButton type="button" color="secondary" variant="outline">Button</CButton>
  <CButton type="button" color="secondary" variant="outline">Button</CButton>
</CInputGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Buttons with dropdowns #

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
<CInputGroup class="mb-3">
  <CDropdown variant="input-group"> 
    <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>
  <CFormInput aria-label="Text input with dropdown button"/>
</CInputGroup>
<CInputGroup class="mb-3">
  <CFormInput aria-label="Text input with dropdown button"/>
  <CDropdown alignment="end" variant="input-group">
    <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>
</CInputGroup>
<CInputGroup>
  <CDropdown variant="input-group">
    <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>
  <CFormInput aria-label="Text input with 2 dropdown buttons"/>
  <CDropdown alignment="end" variant="input-group">
    <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>
</CInputGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

Segmented buttons #

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
<CInputGroup class="mb-3">
  <CDropdown variant="input-group">
    <CButton type="button" color="secondary" variant="outline">Action</CButton>
    <CDropdownToggle color="secondary" variant="outline" split/>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>
  <CFormInput aria-label="Text input with segmented dropdown button"/>
</CInputGroup>
<CInputGroup>
  <CFormInput aria-label="Text input with segmented dropdown button"/>
  <CDropdown alignment="end" variant="input-group">
    <CButton type="button" color="secondary" variant="outline">Action</CButton>
    <CDropdownToggle color="secondary" variant="outline" split/>
    <CDropdownMenu>
      <CDropdownItem href="#">Action</CDropdownItem>
      <CDropdownItem href="#">Another action</CDropdownItem>
      <CDropdownItem href="#">Something else here</CDropdownItem>
      <CDropdownDivider/>
      <CDropdownItem href="#">Separated link</CDropdownItem>
    </CDropdownMenu>
  </CDropdown>
</CInputGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Custom forms #

Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

Custom select #

<CInputGroup class="mb-3">
  <CInputGroupText component="label" for="inputGroupSelect01">Options</CInputGroupText>
  <CFormSelect id="inputGroupSelect01">
    <option>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </CFormSelect>
</CInputGroup>
<CInputGroup class="mb-3">
  <CFormSelect id="inputGroupSelect02">
    <option>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </CFormSelect>
  <CInputGroupText component="label" for="inputGroupSelect02">Options</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
  <CButton type="button" color="secondary" variant="outline">Button</CButton>
  <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
    <option>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </CFormSelect>
</CInputGroup>
<CInputGroup>
  <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
    <option>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </CFormSelect>
  <CButton type="button" color="secondary" variant="outline">Button</CButton>
</CInputGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

Custom file input #

<CInputGroup class="mb-3">
  <CInputGroupText component="label" for="inputGroupFile01">Upload</CInputGroupText>
  <CFormInput type="file" id="inputGroupFile01"/>
</CInputGroup>
<CInputGroup class="mb-3">
  <CFormInput type="file" id="inputGroupFile02"/>
  <CInputGroupText component="label" for="inputGroupFile02">Upload</CInputGroupText>
</CInputGroup>
<CInputGroup class="mb-3">
  <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>
  <CFormInput type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>
</CInputGroup>
<CInputGroup>
  <CFormInput type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>
  <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">Button</CButton>
</CInputGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

API #

CInputGroup #

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

Props #

Prop nameDescriptionTypeValuesDefault
sizeSize the component small or large.string'sm', 'lg'-
On this page
  • Basic example
  • Wrapping
  • Sizing
  • Checkboxes and radios
  • Multiple inputs
  • Multiple addons
  • Button addons
  • Buttons with dropdowns
  • Segmented buttons
  • Custom forms
    • Custom select
    • Custom file input
  • API
    • CInputGroup
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

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

Code licensed MIT , docs CC BY 3.0 .