Input group

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

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 <label>s outside the input group.

Preview

Jsx

@example.com

Your vanity URL

https://example.com/users/

$.00

With textarea

http://.com

import React from 'react';
import { Button, Form, InputGroup } from 'react-bootstrap';

const BasicExample = () => {
  return (
    <>
        <InputGroup className="mb-3">
            <InputGroup.Text id="basic-addon1">@</InputGroup.Text>
            <Form.Control
                placeholder="Username"
                aria-label="Username"
                aria-describedby="basic-addon1"
            />
        </InputGroup>

        <InputGroup className="mb-3">
            <Form.Control
                placeholder="Recipient's username"
                aria-label="Recipient's username"
                aria-describedby="basic-addon2"
            />
            <InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text>
        </InputGroup>

        <Form.Label htmlFor="basic-url">Your vanity URL</Form.Label>
        <InputGroup className="mb-3">
            <InputGroup.Text id="basic-addon3">
                https://example.com/users/
            </InputGroup.Text>
            <Form.Control id="basic-url" aria-describedby="basic-addon3" />
        </InputGroup>

        <InputGroup className="mb-3">
            <InputGroup.Text>$</InputGroup.Text>
            <Form.Control aria-label="Amount (to the nearest dollar)" />
            <InputGroup.Text>.00</InputGroup.Text>
        </InputGroup>

        <InputGroup className="mb-3">
            <Form.Control type="text" placeholder="Username" aria-label="Username" />
            <InputGroup.Text>@</InputGroup.Text>
            <Form.Control type="text" placeholder="Server" aria-label="Server" />
        </InputGroup>

        <InputGroup className="mb-3">
            <InputGroup.Text><i className="fa fa-user" /></InputGroup.Text>
            <Form.Control type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
        </InputGroup>

        <InputGroup className="mb-3">
            <InputGroup.Text>With textarea</InputGroup.Text>
            <Form.Control as="textarea" aria-label="With textarea" />
        </InputGroup>

        <InputGroup className="mb-3">
            <span className="input-affix-wrapper">
                <span className="input-prefix"><i className="fa fa-user" /></span>
                <Form.Control type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
            </span>
        </InputGroup>

        <InputGroup className="mb-3">
            <span className="input-affix-wrapper">
                <Form.Control type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
                <span className="input-suffix"><i className="fa fa-user" /></span>
            </span>
        </InputGroup>

        <InputGroup className="mb-3">
            <InputGroup.Text>

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Sizing

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

Preview

Jsx

Small

Default

Large

import React from 'react';
import { Button, Form, InputGroup } from 'react-bootstrap';

const SizeExample = () => {
  return (
    <>
      <InputGroup size="sm" className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-sm">Small</InputGroup.Text>
        <Form.Control
          aria-label="Small"
          aria-describedby="inputGroup-sizing-sm"
        />
      </InputGroup>
      <br />
      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Default
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>
      <br />
      <InputGroup size="lg">
        <InputGroup.Text id="inputGroup-sizing-lg">Large</InputGroup.Text>
        <Form.Control
          aria-label="Large"
          aria-describedby="inputGroup-sizing-sm"
        />
      </InputGroup>
    </>
  );
}

export default SizeExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Multiple inputs

While multiple inputs are supported visually, validation styles are only available for input groups with a single input.

Preview

Jsx

First and last name

import React from 'react';
import { InputGroup } from 'react-bootstrap'

const MultipleInputsExample = () => {
  return (
    <InputGroup className="mb-3">
      <InputGroup.Text>First and last name</InputGroup.Text>
      <Form.Control aria-label="First name" />
      <Form.Control aria-label="Last name" />
    </InputGroup>
  );
}

export default MultipleInputsExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Multiple addons

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

Preview

Jsx

$0.00

import React from 'react';
import { InputGroup } from 'react-bootstrap'

const MultipleAddons = () => {
  return (
    <>
      <InputGroup className="mb-3">
            <InputGroup.Text>$</InputGroup.Text>
            <InputGroup.Text>0.00</InputGroup.Text>
            <Form.Control aria-label="Dollar amount (with dot and two decimal places)" />
        </InputGroup>
        <InputGroup className="mb-3">
            <Form.Control aria-label="Dollar amount (with dot and two decimal places)" />
            <InputGroup.Text>$</InputGroup.Text>
            <InputGroup.Text>0.00</InputGroup.Text>
        </InputGroup>
        <InputGroup className="mb-3">
            <Button variant="outline-secondary" id="button-addon1">
                Button
            </Button>
            <Form.Control
                aria-label="Example text with button addon"
                aria-describedby="basic-addon1"
            />
        </InputGroup>

        <InputGroup className="mb-3">
            <Form.Control
                placeholder="Recipient's username"
                aria-label="Recipient's username"
                aria-describedby="basic-addon2"
            />
            <Button variant="outline-secondary" id="button-addon2">
                Button
            </Button>
        </InputGroup>

        <InputGroup className="mb-3">
            <Button variant="outline-secondary">Button</Button>
            <Button variant="outline-secondary">Button</Button>
            <Form.Control aria-label="Example text with two button addons" />
        </InputGroup>

        <InputGroup className="mb-3">
            <Form.Control
                placeholder="Recipient's username"
                aria-label="Recipient's username with two button addons"
            />
            <Button variant="outline-secondary">Button</Button>
            <Button variant="outline-secondary">Button</Button>
        </InputGroup>

        <InputGroup className="mb-3">
            <DropdownButton
                variant="outline-secondary"
                title="Dropdown"
                id="input-group-dropdown-1"
            >
                <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>
            </DropdownButton>
            <Form.Control aria-label="Text input with dropdown button" />
        </InputGroup>

        <InputGroup className="mb-3">
            <SplitButton
                variant="outline-secondary"
                title="Action"
                id="segmented-button-dropdown-1"
            >
                <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>
            </SplitButton>
            <Form.Control aria-label="Text input with dropdown button" />
        </InputGroup>
    </>
  );
}

export default MultipleAddons;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Custom forms

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

Preview

Jsx

Options

Upload

import React from 'react';
import { Button, Form, InputGroup } from 'react-bootstrap';

const CustomForms = () => {
  return (
    <Row>
        <Col>
            <InputGroup className="mb-3">
                <InputGroup.Text >Options</InputGroup.Text>
                <Form.Select className='custom-form-select' aria-label="Default select example">
                    <option>Choose...</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </Form.Select>
            </InputGroup>

            <InputGroup className="mb-3">
                <Form.Select className='custom-form-select' aria-label="Default select example">
                    <option>Choose...</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </Form.Select>
                <InputGroup.Text >Options</InputGroup.Text>
            </InputGroup>

            <InputGroup className="mb-3">
                <Button variant='outline-secondary' >Button</Button>
                <Form.Select className='custom-form-select' aria-label="Default select example">
                    <option>Choose...</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </Form.Select>
            </InputGroup>

            <InputGroup className="mb-3">
                <Form.Select className='custom-form-select' aria-label="Default select example">
                    <option>Choose...</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </Form.Select>
                <Button variant='outline-secondary' >Button</Button>
            </InputGroup>

            <InputGroup className="mb-3">
                <InputGroup.Text htmlFor="inputGroupFile01">Upload</InputGroup.Text>
                <Form.Control type="file" id="inputGroupFile01" />
            </InputGroup>

            <InputGroup className="mb-3">
                <Form.Control type="file" id="inputGroupFile02" />
                <InputGroup.Text htmlFor="inputGroupFile02">Upload</InputGroup.Text>
            </InputGroup>

            <InputGroup className="mb-3">
                <Button variant="outline-secondary" id="inputGroupFileAddon03">Button</Button>
                <Form.Control type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload" />
            </InputGroup>

            <InputGroup>
                <Form.Control type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload" />
                <Button variant="outline-secondary" id="inputGroupFileAddon04">Button</Button>
            </InputGroup>
        </Col>
    </Row>
  );
}

export default CustomForms;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Basic Example
Sizing
Multiple inputs
Multiple addons
Custom forms