Bootstrap React Input group
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.
1<CInputGroup className="mb-3">2 <CInputGroupText id="basic-addon1">@</CInputGroupText>3 <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>4</CInputGroup>56<CInputGroup className="mb-3">7 <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>8 <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>9</CInputGroup>1011<CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>12<CInputGroup className="mb-3">13 <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>14 <CFormInput id="basic-url" aria-describedby="basic-addon3"/>15</CInputGroup>1617<CInputGroup className="mb-3">18 <CInputGroupText>$</CInputGroupText>19 <CFormInput aria-label="Amount (to the nearest dollar)"/>20 <CInputGroupText>.00</CInputGroupText>21</CInputGroup>2223<CInputGroup className="mb-3">24 <CFormInput placeholder="Username" aria-label="Username"/>25 <CInputGroupText>@</CInputGroupText>26 <CFormInput placeholder="Server" aria-label="Server"/>27</CInputGroup>2829<CInputGroup>30 <CInputGroupText>With textarea</CInputGroupText>31 <CFormTextarea aria-label="With textarea"></CFormTextarea>32</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
.
1<CInputGroup className="flex-nowrap">2 <CInputGroupText id="addon-wrapping">@</CInputGroupText>3 <CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />4</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.
1<CInputGroup size="sm" className="mb-3">2 <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>3 <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>4</CInputGroup>56<CInputGroup className="mb-3">7 <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>8 <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>9</CInputGroup>1011<CInputGroup size="lg">12 <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>13 <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>14</CInputGroup>
Checkboxes and radios#
Place any checkbox or radio option within an input group's addon instead of text.
1<CInputGroup className="mb-3">2 <CInputGroupText>3 <CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input"/>4 </CInputGroupText>5 <CFormInput aria-label="Text input with checkbox"/>6</CInputGroup>78<CInputGroup>9 <CInputGroupText>10 <CFormCheck type="radio" value="" aria-label="Radio button for following text input"/>11 </CInputGroupText>12 <CFormInput aria-label="Text input with radio button"/>13</CInputGroup>
Multiple inputs#
While multiple <CFormInput>
s are supported visually, validation styles are only available for input groups with a single <CFormInput>
.
1<CInputGroup>2 <CInputGroupText>First and last name</CInputGroupText>3 <CFormInput aria-label="First name" />4 <CFormInput aria-label="Last name" />5</CInputGroup>
Multiple addons#
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
1<CInputGroup className="mb-3">2 <CInputGroupText>$</CInputGroupText>3 <CInputGroupText>0.00</CInputGroupText>4 <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>5</CInputGroup>67<CInputGroup>8 <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>9 <CInputGroupText>$</CInputGroupText>10 <CInputGroupText>0.00</CInputGroupText>11</CInputGroup>
Button addons#
1<CInputGroup className="mb-3">2 <CButton type="button" color="secondary" variant="outline" id="button-addon1">Button</CButton>3 <CFormInput placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"/>4</CInputGroup>56<CInputGroup className="mb-3">7 <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"/>8 <CButton type="button" color="secondary" variant="outline" id="button-addon2">Button</CButton>9</CInputGroup>1011<CInputGroup className="mb-3">12 <CButton type="button" color="secondary" variant="outline">Button</CButton>13 <CButton type="button" color="secondary" variant="outline">Button</CButton>14 <CFormInput placeholder="" aria-label="Example text with two button addons"/>15</CInputGroup>1617<CInputGroup>18 <CFormInput placeholder="Recipient's username" aria-label="Recipient's username with two button addons"/>19 <CButton type="button" color="secondary" variant="outline">Button</CButton>20 <CButton type="button" color="secondary" variant="outline">Button</CButton>21</CInputGroup>
Buttons with dropdowns#
1<CInputGroup className="mb-3">2 <CDropdown variant="input-group">3 <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>4 <CDropdownMenu>5 <CDropdownItem href="#">Action</CDropdownItem>6 <CDropdownItem href="#">Another action</CDropdownItem>7 <CDropdownItem href="#">Something else here</CDropdownItem>8 <CDropdownDivider/>9 <CDropdownItem href="#">Separated link</CDropdownItem>10 </CDropdownMenu>11 </CDropdown>12 <CFormInput aria-label="Text input with dropdown button"/>13</CInputGroup>1415<CInputGroup className="mb-3">16 <CFormInput aria-label="Text input with dropdown button"/>17 <CDropdown alignment="end" variant="input-group">18 <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>19 <CDropdownMenu>20 <CDropdownItem href="#">Action</CDropdownItem>21 <CDropdownItem href="#">Another action</CDropdownItem>22 <CDropdownItem href="#">Something else here</CDropdownItem>23 <CDropdownDivider/>24 <CDropdownItem href="#">Separated link</CDropdownItem>25 </CDropdownMenu>26 </CDropdown>27</CInputGroup>2829<CInputGroup>30 <CDropdown variant="input-group">31 <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>32 <CDropdownMenu>33 <CDropdownItem href="#">Action</CDropdownItem>34 <CDropdownItem href="#">Another action</CDropdownItem>35 <CDropdownItem href="#">Something else here</CDropdownItem>36 <CDropdownDivider/>37 <CDropdownItem href="#">Separated link</CDropdownItem>38 </CDropdownMenu>39 </CDropdown>40 <CFormInput aria-label="Text input with 2 dropdown buttons"/>41 <CDropdown alignment="end" variant="input-group">42 <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>43 <CDropdownMenu>44 <CDropdownItem href="#">Action</CDropdownItem>45 <CDropdownItem href="#">Another action</CDropdownItem>46 <CDropdownItem href="#">Something else here</CDropdownItem>47 <CDropdownDivider/>48 <CDropdownItem href="#">Separated link</CDropdownItem>49 </CDropdownMenu>50 </CDropdown>51</CInputGroup>
Segmented buttons#
1<CInputGroup className="mb-3">2 <CDropdown variant="input-group">3 <CButton type="button" color="secondary" variant="outline">Action</CButton>4 <CDropdownToggle color="secondary" variant="outline" split/>5 <CDropdownMenu>6 <CDropdownItem href="#">Action</CDropdownItem>7 <CDropdownItem href="#">Another action</CDropdownItem>8 <CDropdownItem href="#">Something else here</CDropdownItem>9 <CDropdownDivider/>10 <CDropdownItem href="#">Separated link</CDropdownItem>11 </CDropdownMenu>12 </CDropdown>13 <CFormInput aria-label="Text input with segmented dropdown button"/>14</CInputGroup>1516<CInputGroup>17 <CFormInput aria-label="Text input with segmented dropdown button"/>18 <CDropdown alignment="end" variant="input-group">19 <CButton type="button" color="secondary" variant="outline">Action</CButton>20 <CDropdownToggle color="secondary" variant="outline" split/>21 <CDropdownMenu>22 <CDropdownItem href="#">Action</CDropdownItem>23 <CDropdownItem href="#">Another action</CDropdownItem>24 <CDropdownItem href="#">Something else here</CDropdownItem>25 <CDropdownDivider/>26 <CDropdownItem href="#">Separated link</CDropdownItem>27 </CDropdownMenu>28 </CDropdown>29</CInputGroup>
Custom forms#
Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
Custom select#
1<CInputGroup className="mb-3">2 <CInputGroupText component="label" htmlFor="inputGroupSelect01">Options</CInputGroupText>3 <CFormSelect id="inputGroupSelect01">4 <option>Choose...</option>5 <option value="1">One</option>6 <option value="2">Two</option>7 <option value="3">Three</option>8 </CFormSelect>9</CInputGroup>1011<CInputGroup className="mb-3">12 <CFormSelect id="inputGroupSelect02">13 <option>Choose...</option>14 <option value="1">One</option>15 <option value="2">Two</option>16 <option value="3">Three</option>17 </CFormSelect>18 <CInputGroupText component="label" htmlFor="inputGroupSelect02">Options</CInputGroupText>19</CInputGroup>2021<CInputGroup className="mb-3">22 <CButton type="button" color="secondary" variant="outline">Button</CButton>23 <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">24 <option>Choose...</option>25 <option value="1">One</option>26 <option value="2">Two</option>27 <option value="3">Three</option>28 </CFormSelect>29</CInputGroup>3031<CInputGroup>32 <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">33 <option>Choose...</option>34 <option value="1">One</option>35 <option value="2">Two</option>36 <option value="3">Three</option>37 </CFormSelect>38 <CButton type="button" color="secondary" variant="outline">Button</CButton>39</CInputGroup>
Custom file input#
1<CInputGroup className="mb-3">2 <CInputGroupText component="label" htmlFor="inputGroupFile01">Upload</CInputGroupText>3 <CFormInput type="file" id="inputGroupFile01"/>4</CInputGroup>56<CInputGroup className="mb-3">7 <CFormInput type="file" id="inputGroupFile02"/>8 <CInputGroupText component="label" htmlFor="inputGroupFile02">Upload</CInputGroupText>9</CInputGroup>1011<CInputGroup className="mb-3">12 <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>13 <CFormInput type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>14</CInputGroup>1516<CInputGroup>17 <CFormInput type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>18 <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">Button</CButton>19</CInputGroup>
API#
CInputGroup#
1import { CInputGroup } from '@coreui/bootstrap-react'2// or3import CInputGroup from '@coreui/bootstrap-react/src/components/form/CInputGroup'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
size | Size the component small or large. | 'sm' | 'lg' | - |
CInputGroupText#
1import { CInputGroupText } from '@coreui/bootstrap-react'2// or3import CInputGroupText from '@coreui/bootstrap-react/src/components/form/CInputGroupText'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
component | Component used for the root node. Either a string to use a HTML element or a component. | string | ComponentClass<any, any> | FunctionComponent<any> | - |