Input group

import InputGroup from 'react-bootstrap/InputGroup'
import InputGroupText from 'react-bootstrap/InputGroupText'
import FormControl from 'react-bootstrap/FormControl'

export default function InputGroupAddonPositionDemo() {
  return (
    <>
      {/* Addon on the left */}
      <InputGroup className="mb-3">
        <InputGroupText id="addon-left">
          <i className="ci-user"/>
        </InputGroupText>
        <FormControl placeholder="Username" aria-label="Username" aria-describedby="addon-left" />
      </InputGroup>

      {/* Addon on the right */}
      <InputGroup className="mb-3">
        <FormControl
          type="email"
          placeholder="Recipient's e-mail"
          aria-label="Recipient's e-mail"
          aria-describedby="addon-right"
        />
        <InputGroupText id="addon-right">@example.com</InputGroupText>
      </InputGroup>

      {/* Addon on both sides */}
      <InputGroup>
        <InputGroupText>
          <i className="ci-dollar-sign"/>
        </InputGroupText>
        <FormControl aria-label="Amount (to the nearest dollar)" />
        <InputGroupText>.00</InputGroupText>
      </InputGroup>
    </>
  )
}

import FormControl from 'react-bootstrap/FormControl'

export default function InputGroupIconInsideDemo() {
  return (
    <>
      {/* Icon on the left */}
      <div className="position-relative mb-3">
        <i className="ci-lock position-absolute top-50 start-0 translate-middle-y ms-3"/>
        <FormControl type="password" className="form-icon-start" placeholder="Password" aria-label="Password" />
      </div>

      {/* Icon on the right */}
      <div className="position-relative mb-3">
        <FormControl type="search" className="form-icon-end" placeholder="Search" aria-label="Search" />
        <i className="ci-search position-absolute top-50 end-0 translate-middle-y me-3"/>
      </div>

      {/* Icons on both sides */}
      <div className="position-relative">
        <i className="ci-globe position-absolute top-50 start-0 translate-middle-y ms-3"/>
        <FormControl type="url" className="form-icon-start form-icon-end" placeholder="URL" aria-label="URL" />
        <i className="ci-external-link position-absolute top-50 end-0 translate-middle-y me-3"/>
      </div>
    </>
  )
}

import InputGroup from 'react-bootstrap/InputGroup'
import InputGroupText from 'react-bootstrap/InputGroupText'
import FormControl from 'react-bootstrap/FormControl'

export default function InputGroupMultipleAddonsDemo() {
  return (
    <>
      {/* Multiple addons on the left */}
      <InputGroup className="mb-3">
        <InputGroupText>
          <i className="ci-dollar-sign"/>
        </InputGroupText>
        <InputGroupText>0.00</InputGroupText>
        <FormControl placeholder="Amount" aria-label="Dollar amount (with dot and two decimal places)" />
      </InputGroup>

      {/* Multiple addons on the right */}
      <InputGroup className="mb-3">
        <FormControl placeholder="Amount" aria-label="Dollar amount (with dot and two decimal places)" />
        <InputGroupText>
          <i className="ci-dollar-sign"/>
        </InputGroupText>
        <InputGroupText>0.00</InputGroupText>
      </InputGroup>

      {/* Multiple addons on both sides */}
      <InputGroup>
        <InputGroupText>
          <i className="ci-user"/>
        </InputGroupText>
        <InputGroupText>
          <i className="ci-credit-card"/>
        </InputGroupText>
        <FormControl placeholder="Amount" aria-label="Dollar amount (with dot and two decimal places)" />
        <InputGroupText>
          <i className="ci-dollar-sign"/>
        </InputGroupText>
        <InputGroupText>0.00</InputGroupText>
      </InputGroup>
    </>
  )
}

import InputGroup from 'react-bootstrap/InputGroup'
import InputGroupText from 'react-bootstrap/InputGroupText'
import FormControl from 'react-bootstrap/FormControl'
import FormSelect from 'react-bootstrap/FormSelect'
import FormCheck from 'react-bootstrap/FormCheck'

export default function InputGroupTypesDemo() {
  return (
    <>
      {/* Icon addon + textarea */}
      <InputGroup className="mb-3">
        <InputGroupText id="addon-icon">
          <i className="ci-edit fs-base"/>
        </InputGroupText>
        <FormControl
          as="textarea"
          rows={5}
          placeholder="Type your message here..."
          aria-label="Message"
          aria-describedby="addon-icon"
        />
      </InputGroup>

      {/* Textual addon + select */}
      <InputGroup className="mb-3">
        <InputGroupText as="label" className="text-body-emphasis fw-medium" htmlFor="addon-text">
          Options
        </InputGroupText>
        <FormSelect id="addon-text">
          <option>Choose one...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </FormSelect>
      </InputGroup>

      {/* Checkbox addon + text input */}
      <InputGroup className="mb-3">
        <InputGroupText>
          <FormCheck className="mt-0" aria-label="Checkbox for following text input" />
        </InputGroupText>
        <FormControl placeholder="Text input" aria-label="Text input with checkbox" />
      </InputGroup>

      {/* Radio button addon + text input */}
      <InputGroup>
        <InputGroupText>
          <FormCheck type="radio" className="mt-0" aria-label="Radio button for following text input" />
        </InputGroupText>
        <FormControl placeholder="Text input" aria-label="Text input with radio button" />
      </InputGroup>
    </>
  )
}

import InputGroup from 'react-bootstrap/InputGroup'
import InputGroupText from 'react-bootstrap/InputGroupText'
import FormControl from 'react-bootstrap/FormControl'

export default function InputGroupMultipleInputsDemo() {
  return (
    <>
      {/* Multiple inputs with addon on the left */}
      <InputGroup className="mb-3">
        <InputGroupText id="addon-icon">
          <i className="ci-id-card fs-base"/>
        </InputGroupText>
        <FormControl placeholder="First name" aria-label="First name" />
        <FormControl placeholder="Last name" aria-label="Last name" />
      </InputGroup>

      {/* Multiple inputs with addon on the right */}
      <InputGroup>
        <FormControl placeholder="From" aria-label="From time" />
        <FormControl placeholder="To" aria-label="To time" />
        <InputGroupText id="addon-icon">
          <i className="ci-clock fs-base"/>
        </InputGroupText>
      </InputGroup>
    </>
  )
}

import InputGroup from 'react-bootstrap/InputGroup'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'
import DropdownButton from 'react-bootstrap/DropdownButton'
import DropdownItem from 'react-bootstrap/DropdownItem'

export default function InputGroupButtonAddonDemo() {
  return (
    <>
      {/* Button addon on the left */}
      <InputGroup className="mb-3">
        <Button id="button-addon-left">Button</Button>
        <FormControl
          placeholder="Button on the left"
          aria-label="Text input with button addon"
          aria-describedby="button-addon-left"
        />
      </InputGroup>

      {/* Button addon on the right */}
      <InputGroup className="mb-3">
        <FormControl
          placeholder="Button on the right"
          aria-label="Text input with button addon"
          aria-describedby="button-addon-right"
        />
        <Button variant="dark" id="button-addon-right">Button</Button>
      </InputGroup>

      {/* Dropdown addon on the left */}
      <InputGroup className="mb-3">
        <DropdownButton variant="outline-primary" id="dropdown-addon-left" title="Dropdown">
          <DropdownItem href="#link-1">Action</DropdownItem>
          <DropdownItem href="#link-2">Another action</DropdownItem>
          <DropdownItem href="#link-3">Something else here</DropdownItem>
        </DropdownButton>
        <FormControl
          placeholder="Dropdown on the left"
          aria-label="Text input with dropdown addon"
          aria-describedby="dropdown-addon-left"
        />
      </InputGroup>

      {/* Dropdown addon on the right */}
      <InputGroup className="mb-3">
        <FormControl
          placeholder="Dropdown on the right"
          aria-label="Text input with dropdown addon"
          aria-describedby="dropdown-addon-right"
        />
        <DropdownButton variant="outline-dark" id="dropdown-addon-right" title="Dropdown">
          <DropdownItem href="#link-1">Action</DropdownItem>
          <DropdownItem href="#link-2">Another action</DropdownItem>
          <DropdownItem href="#link-3">Something else here</DropdownItem>
        </DropdownButton>
      </InputGroup>

      {/* Multiple button addons */}
      <InputGroup>
        <FormControl placeholder="Buttons on the right" aria-label="multiple button addons" />
        <Button variant="outline-success" className="btn-icon" aria-label="Confirm">
          <i className="ci-check"/>
        </Button>
        <Button variant="outline-danger" className="btn-icon" aria-label="Delete">
          <i className="ci-trash"/>
        </Button>
      </InputGroup>
    </>
  )
}

import InputGroup from 'react-bootstrap/InputGroup'
import InputGroupText from 'react-bootstrap/InputGroupText'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function InputGroupShapesDemo() {
  return (
    <Stack direction="horizontal" gap={4} className="flex-wrap flex-sm-nowrap">
      <Stack gap={3} className="w-100">

        {/* Rounded (default) input group with icon addon on the left */}
        <InputGroup>
          <InputGroupText id="addon-icon-rounded">
            <i className="ci-user"/>
          </InputGroupText>
          <FormControl
            placeholder="Rounded (default)"
            aria-label="Rounded input group with icon addon"
            aria-describedby="addon-icon-rounded"
          />
        </InputGroup>

        {/* Pill input group with icon addon on the left */}
        <InputGroup>
          <InputGroupText className="rounded-pill rounded-end-0" id="addon-icon-pill">
            <i className="ci-user"/>
          </InputGroupText>
          <FormControl
            className="rounded-pill rounded-start-0"
            placeholder="Pill shape"
            aria-label="Pill input group with icon addon"
            aria-describedby="addon-icon-pill"
          />
        </InputGroup>

        {/* Square input group with icon addon on the left */}
        <InputGroup>
          <InputGroupText className="rounded-0" id="addon-icon-square">
            <i className="ci-user"/>
          </InputGroupText>
          <FormControl
            className="rounded-0"
            placeholder="Square shape"
            aria-label="Square input group with icon addon"
            aria-describedby="addon-icon-square"
          />
        </InputGroup>

      </Stack>
      <Stack gap={3} className="w-100">

        {/* Rounded (default) input group with button addon on the right */}
        <InputGroup>
          <FormControl
            placeholder="Rounded (default)"
            aria-label="Rounded input group with button addon"
            aria-describedby="addon-button-rounded"
          />
          <Button variant="outline-dark" id="addon-button-rounded">Button</Button>
        </InputGroup>

        {/* Pill input group with button addon on the right */}
        <InputGroup>
          <FormControl
            className="rounded-pill rounded-end-0"
            placeholder="Pill shape"
            aria-label="Pill input group with button addon"
            aria-describedby="addon-button-pill"
          />
          <Button variant="outline-dark" className="rounded-pill rounded-start-0" id="addon-button-pill">
            Button
          </Button>
        </InputGroup>

        {/* Square input group with button addon on the right */}
        <InputGroup>
          <FormControl
            className="rounded-0"
            placeholder="Square shape"
            aria-label="Square input group with button addon"
            aria-describedby="addon-button-square"
          />
          <Button variant="outline-dark rounded-0" id="addon-button-square">
            Button
          </Button>
        </InputGroup>
      </Stack>
    </Stack>
  )
}