Hire Us Get CoreUI PRO all-access →

React Input Group Component

Input group

Markdown ChatGPT Claude

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

Available in Other JavaScript Frameworks

CoreUI React Input Group Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:

On this page

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.

import React from 'react'
import { CFormInput, CFormLabel, CFormTextarea, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText id="basic-addon1">@</CInputGroupText>
        <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
      </CInputGroup>

      <CInputGroup className="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 htmlFor="basic-url">Your vanity URL</CFormLabel>
      <CInputGroup className="mb-3">
        <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
        <CFormInput id="basic-url" aria-describedby="basic-addon3" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CInputGroupText>$</CInputGroupText>
        <CFormInput aria-label="Amount (to the nearest dollar)" />
        <CInputGroupText>.00</CInputGroupText>
      </CInputGroup>

      <CInputGroup className="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>
    </>
  )
}
import React from 'react'
import { CFormInput, CFormLabel, CFormTextarea, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText id="basic-addon1">@</CInputGroupText>
        <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
      </CInputGroup>

      <CInputGroup className="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 htmlFor="basic-url">Your vanity URL</CFormLabel>
      <CInputGroup className="mb-3">
        <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
        <CFormInput id="basic-url" aria-describedby="basic-addon3" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CInputGroupText>$</CInputGroupText>
        <CFormInput aria-label="Amount (to the nearest dollar)" />
        <CInputGroupText>.00</CInputGroupText>
      </CInputGroup>

      <CInputGroup className="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>
    </>
  )
}

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.

import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupWrappingExample = () => {
  return (
    <CInputGroup className="flex-nowrap">
      <CInputGroupText id="addon-wrapping">@</CInputGroupText>
      <CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
    </CInputGroup>
  )
}
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupWrappingExample = () => {
  return (
    <CInputGroup className="flex-nowrap">
      <CInputGroupText id="addon-wrapping">@</CInputGroupText>
      <CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
    </CInputGroup>
  )
}

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.

import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupSizingExample = () => {
  return (
    <>
      <CInputGroup size="sm" className="mb-3">
        <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
        <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
      </CInputGroup>

      <CInputGroup className="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>
    </>
  )
}
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupSizingExample = () => {
  return (
    <>
      <CInputGroup size="sm" className="mb-3">
        <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
        <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
      </CInputGroup>

      <CInputGroup className="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>
    </>
  )
}

Checkboxes and radios

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

import React from 'react'
import { CFormCheck, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCheckboxesAndRadiosExample = () => {
  return (
    <>
      <CInputGroup className="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>
    </>
  )
}
import React from 'react'
import { CFormCheck, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCheckboxesAndRadiosExample = () => {
  return (
    <>
      <CInputGroup className="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>
    </>
  )
}

Multiple inputs

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

import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupMultipleInputsExample = () => {
  return (
    <CInputGroup>
      <CInputGroupText>First and last name</CInputGroupText>
      <CFormInput aria-label="First name" />
      <CFormInput aria-label="Last name" />
    </CInputGroup>
  )
}
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupMultipleInputsExample = () => {
  return (
    <CInputGroup>
      <CInputGroupText>First and last name</CInputGroupText>
      <CFormInput aria-label="First name" />
      <CFormInput aria-label="Last name" />
    </CInputGroup>
  )
}

Multiple addons

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

import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupMultipleAddonsExample = () => {
  return (
    <>
      <CInputGroup className="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>
    </>
  )
}
import React from 'react'
import { CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupMultipleAddonsExample = () => {
  return (
    <>
      <CInputGroup className="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>
    </>
  )
}

Button addons 

import React from 'react'
import { CButton, CFormInput, CInputGroup } from '@coreui/react'

export const InputGroupButtonAddonsExample = () => {
  return (
    <>
      <CInputGroup className="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 className="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 className="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>
    </>
  )
}
import React from 'react'
import { CButton, CFormInput, CInputGroup } from '@coreui/react'

export const InputGroupButtonAddonsExample = () => {
  return (
    <>
      <CInputGroup className="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 className="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 className="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>
    </>
  )
}

Buttons with dropdowns 

import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CFormInput,
  CInputGroup,
} from '@coreui/react'

export const InputGroupButtonsWithDropdownsExample = () => {
  return (
    <>
      <CInputGroup className="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 className="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>
    </>
  )
}
import React from 'react'
import {
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CFormInput,
  CInputGroup,
} from '@coreui/react'

export const InputGroupButtonsWithDropdownsExample = () => {
  return (
    <>
      <CInputGroup className="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 className="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>
    </>
  )
}

Segmented buttons 

import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CFormInput,
  CInputGroup,
} from '@coreui/react'

export const InputGroupSegmentedButtonsExample = () => {
  return (
    <>
      <CInputGroup className="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>
    </>
  )
}
import React from 'react'
import {
  CButton,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CFormInput,
  CInputGroup,
} from '@coreui/react'

export const InputGroupSegmentedButtonsExample = () => {
  return (
    <>
      <CInputGroup className="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>
    </>
  )
}

Custom forms

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

Custom select 

import React from 'react'
import { CButton, CFormSelect, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCustomSelectExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText as="label" htmlFor="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 className="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 as="label" htmlFor="inputGroupSelect02">
          Options
        </CInputGroupText>
      </CInputGroup>
      <CInputGroup className="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>
      Custom file input# Upload
    </>
  )
}
import React from 'react'
import { CButton, CFormSelect, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCustomSelectExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText as="label" htmlFor="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 className="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 as="label" htmlFor="inputGroupSelect02">
          Options
        </CInputGroupText>
      </CInputGroup>
      <CInputGroup className="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>
      Custom file input# Upload
    </>
  )
}

Custom file input 

import React from 'react'
import { CButton, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCustomFileInputExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText as="label" htmlFor="inputGroupFile01">
          Upload
        </CInputGroupText>
        <CFormInput type="file" id="inputGroupFile01" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput type="file" id="inputGroupFile02" />
        <CInputGroupText as="label" htmlFor="inputGroupFile02">
          Upload
        </CInputGroupText>
      </CInputGroup>

      <CInputGroup className="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>
    </>
  )
}
import React from 'react'
import { CButton, CFormInput, CInputGroup, CInputGroupText } from '@coreui/react'

export const InputGroupCustomFileInputExample = () => {
  return (
    <>
      <CInputGroup className="mb-3">
        <CInputGroupText as="label" htmlFor="inputGroupFile01">
          Upload
        </CInputGroupText>
        <CFormInput type="file" id="inputGroupFile01" />
      </CInputGroup>

      <CInputGroup className="mb-3">
        <CFormInput type="file" id="inputGroupFile02" />
        <CInputGroupText as="label" htmlFor="inputGroupFile02">
          Upload
        </CInputGroupText>
      </CInputGroup>

      <CInputGroup className="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>
    </>
  )
}

API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.