extends ../../_layout/default.pug

block canonical
  link(rel='canonical' href='https://coreui.io/docs/forms/input-group/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Forms'},
      'Input group'
    ]
  )

block view
  +docs-components('https://coreui.io/docs/forms/input-group/')
  .row
    .col-12
      .card.mb-4
        .card-header
          strong Input group
          span.small.ms-1 Basic example
        .card-body
          p.text-body-secondary.small
            | 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 
            code
              = '<label>'
            | s outside the input group.
          +example('https://coreui.io/docs/forms/input-group/#basic-example')
            .input-group.mb-3
              span.input-group-text#basic-addon1 @
              input.form-control(type='text' placeholder='Username' aria-label='Username' aria-describedby='basic-addon1')
            .input-group.mb-3
              input.form-control(type='text' placeholder='Recipient\'s username' aria-label='Recipient\'s username' aria-describedby='basic-addon2')
              span.input-group-text#basic-addon2 @example.com
            label.form-label(for='basic-url') Your vanity URL
            .input-group.mb-3
              span.input-group-text#basic-addon3 https://example.com/users/
              input.form-control#basic-url(type='text' aria-describedby='basic-addon3')
            .input-group.mb-3
              span.input-group-text $
              input.form-control(type='text' aria-label='Amount (to the nearest dollar)')
              span.input-group-text .00
            .input-group.mb-3
              input.form-control(type='text' placeholder='Username' aria-label='Username')
              span.input-group-text @
              input.form-control(type='text' placeholder='Server' aria-label='Server')
            .input-group
              span.input-group-text With textarea
              textarea.form-control(aria-label='With textarea')
    .col-12
      .card.mb-4
        .card-header
          strong Input group
          span.small.ms-1 Wrapping
        .card-body
          p.text-body-secondary.small
            | Input groups wrap by default via 
            code flex-wrap: wrap
            |  in order to accommodate custom form field validation within an input group. You may disable this with 
            code .flex-nowrap
            | .
          +example('https://coreui.io/docs/forms/input-group/#wrapping')
            .input-group.flex-nowrap
              span.input-group-text#addon-wrapping @
              input.form-control(type='text' placeholder='Username' aria-label='Username' aria-describedby='addon-wrapping')
    .col-12
      .card.mb-4
        .card-header
          strong Input group
          span.small.ms-1 Sizing
        .card-body
          p.text-body-secondary.small
            | Add the relative form sizing classes to the 
            code .input-group
            |  itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
          p.text-body-secondary.small
            strong Sizing on the individual input group elements isn’t supported.
          +example('https://coreui.io/docs/forms/input-group/#sizing')
            .input-group.input-group-sm.mb-3
              span.input-group-text#inputGroup-sizing-sm Small
              input.form-control(type='text' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-sm')
            .input-group.mb-3
              span.input-group-text#inputGroup-sizing-default Default
              input.form-control(type='text' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-default')
            .input-group.input-group-lg
              span.input-group-text#inputGroup-sizing-lg Large
              input.form-control(type='text' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-lg')
    .col-12
      .card.mb-4
        .card-header
          strong Input group
          span.small.ms-1 Checkboxes and radios
        .card-body
          p.text-body-secondary.small
            | Place any checkbox or radio option within an input group’s addon instead of text. We recommend adding 
            code .mt-0
            |  to the 
            code .form-check-input
            |  when there’s no visible text next to the input.
          +example('https://coreui.io/docs/forms/input-group/#checkboxes-and-radios')
            .input-group.mb-3
              .input-group-text
                input.form-check-input.mt-0(type='checkbox' aria-label='Checkbox for following text input')
              input.form-control(type='text' aria-label='Text input with checkbox')
            .input-group
              .input-group-text
                input.form-check-input.mt-0(type='radio' aria-label='Radio button for following text input')
              input.form-control(type='text' aria-label='Text input with radio button')
    .col-12
      .card.mb-4
        .card-header
          strong Input group
          span.small.ms-1 Multiple inputs
        .card-body
          p.text-body-secondary.small
            | While multiple 
            code
              = '<input>'
            | s are supported visually, validation styles are only available for input groups with a single 
            code
              = '<input>'
            | .
          +example('https://coreui.io/docs/forms/input-group/#multiple-inputs')
            .input-group
              span.input-group-text First and last name
              input.form-control(type='text' aria-label='First name')
              input.form-control(type='text' aria-label='Last name')
    .col-12
      .card.mb-4
        .card-header
          strong Input group
          span.small.ms-1 Multiple addons
        .card-body
          p.text-body-secondary.small Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
          +example('https://coreui.io/docs/forms/input-group/#multiple-addons')
            .input-group.mb-3
              span.input-group-text $
              span.input-group-text 0.00
              input.form-control(type='text' aria-label='Dollar amount (with dot and two decimal places)')
            .input-group
              input.form-control(type='text' aria-label='Dollar amount (with dot and two decimal places)')
              span.input-group-text $
              span.input-group-text 0.00
    .col-12
      .card.mb-4
        .card-header
          strong Input group
          span.small.ms-1 Button addons
        .card-body
          +example('https://coreui.io/docs/forms/input-group/#button-addons')
            .input-group.mb-3
              button.btn.btn-outline-secondary#button-addon1(type='button') Button
              input.form-control(type='text' placeholder aria-label='Example text with button addon' aria-describedby='button-addon1')
            .input-group.mb-3
              input.form-control(type='text' placeholder='Recipient\'s username' aria-label='Recipient\'s username' aria-describedby='button-addon2')
              button.btn.btn-outline-secondary#button-addon2(type='button') Button
            .input-group.mb-3
              button.btn.btn-outline-secondary(type='button') Button
              button.btn.btn-outline-secondary(type='button') Button
              input.form-control(type='text' placeholder aria-label='Example text with two button addons')
            .input-group
              input.form-control(type='text' placeholder='Recipient\'s username' aria-label='Recipient\'s username with two button addons')
              button.btn.btn-outline-secondary(type='button') Button
              button.btn.btn-outline-secondary(type='button') Button
    .col-12
      .card.mb-4
        .card-header
          strong Input group
          span.small.ms-1 Buttons with dropdowns
        .card-body
          +example('https://coreui.io/docs/forms/input-group/#buttons-with-dropdowns')
            .input-group.mb-3
              button.btn.btn-outline-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false') Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
              input.form-control(type='text' aria-label='Text input with dropdown button')
            .input-group.mb-3
              input.form-control(type='text' aria-label='Text input with dropdown button')
              button.btn.btn-outline-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false') Dropdown
              ul.dropdown-menu.dropdown-menu-end
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .input-group
              button.btn.btn-outline-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false') Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action before
                li
                  a.dropdown-item(href='#') Another action before
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
              input.form-control(type='text' aria-label='Text input with 2 dropdown buttons')
              button.btn.btn-outline-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false') Dropdown
              ul.dropdown-menu.dropdown-menu-end
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
    .col-12
      .card.mb-4
        .card-header
          strong Input group
          span.small.ms-1 Segmented buttons
        .card-body
          +example('https://coreui.io/docs/forms/input-group/#segmented-buttons')
            .input-group.mb-3
              button.btn.btn-outline-secondary(type='button') Action
              button.btn.btn-outline-secondary.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
              input.form-control(type='text' aria-label='Text input with segmented dropdown button')
            .input-group
              input.form-control(type='text' aria-label='Text input with segmented dropdown button')
              button.btn.btn-outline-secondary(type='button') Action
              button.btn.btn-outline-secondary.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropdown
              ul.dropdown-menu.dropdown-menu-end
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
  .row
    .col-12
      .card.mb-4
        .card-header
          strong Custom forms
          span.small.ms-1 Custom select
        .card-body
          +example('https://coreui.io/docs/forms/input-group/#custom-select')
            .input-group.mb-3
              label.input-group-text(for='inputGroupSelect01') Options
              select.form-select#inputGroupSelect01
                option(selected) Choose...
                option(value='1') One
                option(value='2') Two
                option(value='3') Three
            .input-group.mb-3
              select.form-select#inputGroupSelect02
                option(selected) Choose...
                option(value='1') One
                option(value='2') Two
                option(value='3') Three
              label.input-group-text(for='inputGroupSelect02') Options
            .input-group.mb-3
              button.btn.btn-outline-secondary(type='button') Button
              select.form-select#inputGroupSelect03(aria-label='Example select with button addon')
                option(selected) Choose...
                option(value='1') One
                option(value='2') Two
                option(value='3') Three
            .input-group
              select.form-select#inputGroupSelect04(aria-label='Example select with button addon')
                option(selected) Choose...
                option(value='1') One
                option(value='2') Two
                option(value='3') Three
              button.btn.btn-outline-secondary(type='button') Button
    .col-12
      .card.mb-4
        .card-header
          strong Custom forms
          span.small.ms-1 Custom file input
        .card-body
          +example('https://coreui.io/docs/forms/input-group/#custom-file-input')
            .input-group.mb-3
              label.input-group-text(for='inputGroupFile01') Upload
              input.form-control#inputGroupFile01(type='file')
            .input-group.mb-3
              input.form-control#inputGroupFile02(type='file')
              label.input-group-text(for='inputGroupFile02') Upload
            .input-group.mb-3
              button.btn.btn-outline-secondary#inputGroupFileAddon03(type='button') Button
              input.form-control#inputGroupFile03(type='file' aria-describedby='inputGroupFileAddon03' aria-label='Upload')
            .input-group
              input.form-control#inputGroupFile04(type='file' aria-describedby='inputGroupFileAddon04' aria-label='Upload')
              button.btn.btn-outline-secondary#inputGroupFileAddon04(type='button') Button