Logo BRUTOPIA
  • Menu
  • Intallation
  • Components
    • Accordion
    • Alert
    • Badge
    • Breadcrumb
    • Button
    • Card
    • Carousel
    • Collapse
    • Dropdown
    • List Group
    • Modal
    • Navs
    • Pagination
    • Progress
    • Spinner
    • Toasts
    • Tooltip
    • Avatar
    • Divider
  • Forms & Tables
  • Form Elements
    • Input
    • Input Group
    • Select
    • Radio
    • Checkbox
    • Textarea
  • Form Layout
  • Table
  • Neo-Brutalism
  • Github
  • Bootstrap
  • Buy me a coffee

Input Group

A group for input to display information in before or after input.

Basic Input Groups

Add span with .input-group-text class before <input> for input-group-prepend and add span with .input-group-text class after <input> for input-group-append.

@
@example.com
$ .00

Multiple Inputs

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

First and last name

Multiple Addons

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

$ 0.00
$ 0.00

Input Groups with Checkboxes and Radios

Input Groups can use with checkboxes and radio buttons also. For it add code for .checkbox class and .radio class respectively.

Input Groups with different sizes

Add .input-group-{lg/sm} class to .input-group for Large/Small addon/prepend.

Small
Default
Large

Input Groups with Buttons

Add <button> before or after <input> tag

Input Groups with Dropdown

Add <button> with .dropdown-toggle class and add dropdown-menu after it to get input group with dropdown.

  • Action
  • Another action
  • Something else here

  • Separated link
  • Action before
  • Another action before
  • Something else here

  • Separated link
  • Action
  • Another action
  • Something else here

  • Separated link

Custom file input

2023 © Your Company

Desinged with by RajNandan