Input Group

  1. Form Elements
  2. Input Group
Input Groups
@
@example.com
https://example.com/users/
$.00
@
With textarea

<InputGroup className="mb-3">
<InputGroup.Text className="" id="basic-addon1">@</InputGroup.Text>
<Form.Control type="text" className="" placeholder="Username"
aria-label="Username" aria-describedby="basic-addon1"/>
</InputGroup>
<InputGroup className="mb-3">
<Form.Control type="text" className="" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2"/>
<InputGroup.Text className="" id="basic-addon2">@example.com</InputGroup.Text>
</InputGroup>
<Form.Label htmlFor="basic-url" className="form-label">Your vanity URL</Form.Label>
<InputGroup className="mb-3">
<InputGroup.Text className=""
id="basic-addon3">https://example.com/users/</InputGroup.Text>
<Form.Control type="text" className="" id="basic-url"
aria-describedby="basic-addon3"/>
</InputGroup>
<InputGroup className="mb-3">
<InputGroup.Text className="">$</InputGroup.Text>
<Form.Control type="text" className=""
aria-label="Amount (to the nearest dollar)"/>
<InputGroup.Text className="">.00</InputGroup.Text>
</InputGroup>
<InputGroup className="mb-3">
<Form.Control type="text" className="" placeholder="Username"
aria-label="Username"/>
<InputGroup.Text className="">@</InputGroup.Text>
<Form.Control type="text" className="" placeholder="Server"
aria-label="Server"/>
</InputGroup>
<InputGroup>
<InputGroup.Text className="">With textarea</InputGroup.Text>
<Form.Control as="textarea" className="" aria-label="With textarea"/>
</InputGroup>
Warpping
@

<InputGroup className="flex-nowrap">
<InputGroup.Text className="" id="addon-wrapping">@</InputGroup.Text>
<Form.Control type="text" className="" placeholder="Username"
aria-label="Username" aria-describedby="addon-wrapping"/>
</InputGroup>
Sizing
Small
Default
Large

<InputGroup className="input-group-sm mb-3">
<InputGroup.Text className="" id="inputGroup-sizing-sm">Small</InputGroup.Text>
<Form.Control type="text" className="form-control"
aria-label="Sizing example input"            
aria-describedby="inputGroup-sizing-sm"/>
</InputGroup>
<InputGroup className="mb-3">
<InputGroup.Text className=""
id="inputGroup-sizing-default">Default</InputGroup.Text>
<Form.Control type="text" className="form-control"
aria-label="Sizing example input"            
aria-describedby="inputGroup-sizing-default"/>
</InputGroup>
<InputGroup className="input-group-lg">
<InputGroup.Text className="" id="inputGroup-sizing-lg">Large</InputGroup.Text>
<Form.Control type="text" className="form-control"
aria-label="Sizing example input"            
aria-describedby="inputGroup-sizing-lg"/>
</InputGroup>
Buttons addons

<InputGroup className="mb-3">
<Button variant='primary' className="" type="button"
id="button-addon1">Button</Button>
<Form.Control type="text" className="" placeholder=""
aria-label="Example text with button addon"
aria-describedby="button-addon1"/>
</InputGroup>
<InputGroup className="mb-3">
<Form.Control type="text" className="" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="button-addon2"/>
<Button variant='primary' className="" type="button"
id="button-addon2">Button</Button>
</InputGroup>
<InputGroup className="mb-3">
<Button variant='primary' className="" type="button">Button</Button>
<Button variant='primary' className="" type="button">Button</Button>
<Form.Control type="text" className="" placeholder=""
aria-label="Example text with two button addons"/>
</InputGroup>
<InputGroup>
<Form.Control type="text" className="" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"/>
<Button variant='primary' className="" type="button">Button</Button>
<Button variant='primary' className="" type="button">Button</Button>
</InputGroup>
Buttons with dropdowns
ActionAnother actionSomething else hereSeparated link
ActionAnother actionSomething else hereSeparated link
ActionAnother actionSomething else hereSeparated link
ActionAnother actionSomething else hereSeparated link

<InputGroup className="mb-3">
<Dropdown>
<Dropdown.Toggle variant='' className="btn btn-primary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">Dropdown</Dropdown.Toggle>
<Dropdown.Menu className="">
<Dropdown.Item href="#">Action</Dropdown.Item>
<Dropdown.Item href="#">Another action</Dropdown.Item>
<Dropdown.Item href="#">Something else here</Dropdown.Item>
<Dropdown.Divider>
</Dropdown.Divider>
<Dropdown.Item href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form.Control type="text" className="form-control"
aria-label="Text input with dropdown button"/>
</InputGroup>
<InputGroup className="mb-3">
<Form.Control type="text" className="form-control"
aria-label="Text input with dropdown button"/>
<Dropdown>
<Dropdown.Toggle variant='' className="btn btn-outline-primary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">Dropdown</Dropdown.Toggle>
<Dropdown.Menu className="">
<Dropdown.Item href="#">Action</Dropdown.Item>
<Dropdown.Item href="#">Another action</Dropdown.Item>
<Dropdown.Item href="#">Something else here</Dropdown.Item>
<Dropdown.Divider>
</Dropdown.Divider>
<Dropdown.Item href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</InputGroup>
<InputGroup>
<Dropdown>
<Dropdown.Toggle variant='' className="btn btn-primary-transparent dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">Dropdown</Dropdown.Toggle>
<Dropdown.Menu className="">
<Dropdown.Item href="#">Action</Dropdown.Item>
<Dropdown.Item href="#">Another action</Dropdown.Item>
<Dropdown.Item href="#">Something else here</Dropdown.Item>
<Dropdown.Divider>
</Dropdown.Divider>
<Dropdown.Item href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form.Control type="text" className=""
aria-label="Text input with 2 dropdown buttons"/>
<Dropdown>
<Dropdown.Toggle variant='' className="btn btn-primary-transparent dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">Dropdown</Dropdown.Toggle>
<Dropdown.Menu className="">
<Dropdown.Item href="#">Action</Dropdown.Item>
<Dropdown.Item href="#">Another action</Dropdown.Item>
<Dropdown.Item href="#">Something else here</Dropdown.Item>
<Dropdown.Divider>
</Dropdown.Divider>
<Dropdown.Item href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</InputGroup>
Custom file input

<InputGroup className="mb-3">
<label className="input-group-text" htmlFor="inputGroupFile01">Upload</label>
<Form.Control type="file" className="form-control" id="inputGroupFile01"/>
</InputGroup>

<InputGroup className="mb-3">
<Form.Control type="file" className="form-control" id="inputGroupFile02"/>
<label className="input-group-text" htmlFor="inputGroupFile02">Upload</label>
</InputGroup>

<InputGroup className="mb-3">
<Button variant='' className="btn btn-primary" type="button"
id="inputGroupFileAddon03">Button</Button>
<Form.Control type="file" className="form-control" id="inputGroupFile03"
aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>
</InputGroup>

<InputGroup>
<Form.Control type="file" className="form-control" id="inputGroupFile04"
aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>
<Button variant='' className="btn btn-primary" type="button"
id="inputGroupFileAddon04">Button</Button>
</InputGroup>
Multiple inputs
First and last name

<InputGroup>
<InputGroup.Text className="">First and last name</InputGroup.Text>
<Form.Control type="text" aria-label="First name" className=""/>
<Form.Control type="text" aria-label="Last name" className=""/>
</InputGroup>
Checkboxes and radios

<InputGroup className="mb-3">
<InputGroup.Text className="">
<Form.Check  className=" mt-0" type="checkbox" value=""
aria-label="Checkbox for following text input"/>
</InputGroup.Text>
<Form.Control type="text" className=""
aria-label="Text input with checkbox"/>
</InputGroup>
<InputGroup>
<InputGroup.Text className="">
<Form.Check className=" mt-0" type="radio" value=""
aria-label="Radio button for following text input"/>
</InputGroup.Text>
<Form.Control type="text" className=""
aria-label="Text input with radio button"/>
</InputGroup>
Multiple addons

<InputGroup className="mb-3">
<InputGroup.Text className="">
<Form.Check className="mt-0" type="checkbox" value=""
aria-label="Checkbox for following text input"/>
</InputGroup.Text>
<Form.Control type="text" className=""
aria-label="Text input with checkbox"/>
</InputGroup>
<InputGroup>
<InputGroup.Text className="">
<Form.Check className="mt-0" type="radio" value=""
aria-label="Radio button for following text input"/>
</InputGroup.Text>
<Form.Control type="text" className=""
aria-label="Text input with radio button"/>
</InputGroup>
Segmented buttons
ActionAnother actionSomething else hereSeparated link
ActionAnother actionSomething else hereSeparated link

<InputGroup className="mb-3">
<Button variant='primary' type="button" className="">Action</Button>
<Dropdown>
<Dropdown.Toggle type="button"
className="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false">
<span className="visually-hidden">Toggle Dropdown</span>
</Dropdown.Toggle>
<Dropdown.Menu className="">
<Dropdown.Item href="#">Action</Dropdown.Item>
<Dropdown.Item href="#">Another action</Dropdown.Item>
<Dropdown.Item href="#">Something else here</Dropdown.Item>
<Dropdown.Divider/>
<Dropdown.Item href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form.Control type="text" className=""
aria-label="Text input with segmented dropdown button"/>
</InputGroup>
<InputGroup>
<Form.Control type="text" className=""
aria-label="Text input with segmented dropdown button"/>
<Button type="button" className="btn btn-primary">Action</Button>
<Dropdown>
<Dropdown.Toggle variant='' type="button"
className="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false">
<span className="visually-hidden">Toggle Dropdown</span>
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu-end">
<Dropdown.Item href="#">Action</Dropdown.Item>
<Dropdown.Item href="#">Another action</Dropdown.Item>
<Dropdown.Item href="#">Something else here</Dropdown.Item>
<Dropdown.Divider/>
<Dropdown.Item href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</InputGroup>
Custom select
Choose...
Choose...
Choose...
Choose...

<InputGroup className="mb-3">
<label className="input-group-text" htmlFor="inputGroupSelect01">Options</label>
<Select  name="colors" options={Selectdata1} className="basic-multi-select flex-grow-1"
menuPlacement='auto' classNamePrefix="Select2" defaultValue={[Selectdata1[0]]}/>
</InputGroup>
<InputGroup className="mb-3">
<Select  name="colors" options={Selectdata1} className="basic-multi-select flex-grow-1"
menuPlacement='auto' classNamePrefix="Select2" defaultValue={[Selectdata1[0]]} />
<label className="input-group-text" htmlFor="inputGroupSelect02">Options</label>
</InputGroup>
<InputGroup className="mb-3">
<Button variant='' className="btn btn-primary" type="button">Button</Button>
<Select  name="colors" options={Selectdata1} className="basic-multi-select flex-grow-1"
menuPlacement='auto' classNamePrefix="Select2" defaultValue={[Selectdata1[0]]} />
</InputGroup>
<InputGroup>
<Select  name="colors" options={Selectdata1} className="basic-multi-select flex-grow-1"
menuPlacement='auto' classNamePrefix="Select2" defaultValue={[Selectdata1[0]]} />
<Button variant='' className="btn btn-primary" type="button">Button</Button>
</InputGroup>