- var page_Title = 'Input Groups';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Input Groups
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Form Controls
                    li.breadcrumb-item.active  Input groups
          // Container-fluid starts
          .container.main-input-group
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Button Addons 
                    p.f-m-light.mt-1 
                      | Multiple add-ons are supported and can be mixed with buttons input versions.
                  .card-body.card-wrapper.input-group-wrapper.btn-addon
                    .input-group
                      button#button-addon1.btn.btn-outline-secondary.border(type='button' class="!rounded-l-lg !rounded-none") $ 25
                      input.form-control(type='text' class="!rounded-r-lg !rounded-none" placeholder='' aria-label='Example text with button addon' aria-describedby='button-addon1')
                    .input-group
                      input.form-control(type='text' class="!rounded-l-lg !rounded-none" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby='button-addon2')
                      button#button-addon2.btn.btn-outline-primary.border(type='button' class="!rounded-r-lg !rounded-none") Submit
                    .input-group
                      button.btn.btn-secondary.text-white(type='button' class="!rounded-l-lg !rounded-none")
                        span &#8364; 
                      button.btn.btn-primary.text-white(type='button' class="!rounded-none") 0.0114419
                      input.form-control(type='text' placeholder='' aria-label='Example text with two button addons' class="!rounded-r-lg !rounded-none")
                    .input-group
                      input.form-control(type='text'  class="!rounded-l-lg !rounded-none" placeholder="Recipient's username" aria-label="Recipient's username with two button addons")
                      button.btn.btn-secondary.text-white(type='button' class="!rounded-none") 
                        span &#8377;
                      button.btn.btn-primary.text-white(type='button' class="!rounded-r-lg !rounded-none") 500
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Custom Forms 
                    p.f-m-light.mt-1 
                      | Input groups include support for 
                      code custom selects and custom file inputs
                      | . Browser default versions of these are not supported.
                  .card-body.common-flex.main-custom-form
                    .input-group
                      label.input-group-text(for='inputGroupSelect01' class="!rounded-l-lg !rounded-none") Options
                      select#inputGroupSelect01.form-select(class="!rounded-r-lg !rounded-none")
                        option(selected='') Select Your Favorite Pixelstrap theme
                        option(value='1') Tivo
                        option(value='2') Mofi
                        option(value='3') Roxo
                    .input-group
                      select#inputGroupSelect02.form-select(class="!rounded-l-lg !rounded-none")
                        option(selected='') Select Your Favorite Colors
                        option(value='1') Yellow
                        option(value='2') Red
                        option(value='3') Orange
                      label.input-group-text(for='inputGroupSelect02' class="!rounded-r-lg !rounded-none") Options
                    .input-group
                      button.btn.btn-outline-secondary.border(type='button' class="!rounded-l-lg !rounded-none") 
                        i.icofont.icofont-credit-card
                      select#inputGroupSelect03.form-select(aria-label='Example select with button addon' class="!rounded-r-lg !rounded-none")
                        option(selected='') Select Your Favorite Chocolates
                        option(value='1') Dark Chocolates
                        option(value='2') Dairy Milk
                        option(value='3') Kitkat
                    .input-group
                      select#inputGroupSelect04.form-select(aria-label='Example select with button addon' class="!rounded-l-lg !rounded-none")
                        option(selected='') Select Your Favorite Theme
                        option(value='1') Oslo
                        option(value='2') Koho
                        option(value='3') Voxo
                      button.btn.btn-outline-secondary.border(type='button' class="!rounded-r-lg !rounded-none") Submit
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Custom File Input 
                    p.f-m-light.mt-1 
                      | Input groups include support for custom selects and custom 
                      code file uploads
                      | . Browser default versions of these are not supported.
                  .card-body.main-custom-form.input-group-wrapper
                    .input-group
                      label.input-group-text(for='inputGroupFile01' class="!rounded-l-lg !rounded-none") Upload
                      input#inputGroupFile01.form-control(type='file')
                    .input-group
                      input#inputGroupFile02.form-control(type='file' class="!rounded-l-lg !rounded-none")
                      label.input-group-text(for='inputGroupFile02' class="!rounded-r-lg !rounded-none") Verify
                    .input-group
                      button#inputGroupFileAddon03.btn.btn-outline-secondary.border(type='button' class="!rounded-l-lg !rounded-none")
                        i.icofont.icofont-ui-copy
                      input#inputGroupFile03.form-control(type='file' aria-describedby='inputGroupFileAddon03' aria-label='Upload' class="!rounded-r-lg !rounded-none")
                    .input-group
                      input#inputGroupFile04.form-control(type='file' aria-describedby='inputGroupFileAddon04' aria-label='Upload'  class="!rounded-l-lg !rounded-none")
                      button#inputGroupFileAddon04.btn.btn-outline-secondary.border(type='button' class="!rounded-r-lg !rounded-none") Submit
              div(class="col-span-6 xl:col-span-12")
                .card.buttons-with-dropdowns 
                  .card-header
                    h5 Buttons with Dropdowns 
                    p.f-m-light.mt-1 
                      | Use 
                      code input-group 
                      | and 
                      code [aria-label='']
                      |  through buttons with dropdowns.
                  .card-body.main-custom-form.card-wrapper.input-group-wrapper
                    .input-group.dropdown
                      button.btn.btn-outline-primary.dropdown-toggle.border(type='button' class="hover:text-white" data-bs-toggle='dropdown' aria-expanded='false' class="!rounded-l-lg !rounded-none") Dropdown
                      ul.dropdown-menu.dropdown-block
                        li
                          a.dropdown-item(href='#!') Ecommerce
                        li
                          a.dropdown-item(href='#!') Email
                        li
                          a.dropdown-item(href='#!') Users
                        li
                          hr.dropdown-divider
                        li
                          a.dropdown-item(href='#!') Bookmarks
                      input.form-control(type='text' aria-label='Text input with dropdown button')
                    .input-group.dropdown
                      input.form-control(type='text' aria-label='Text input with dropdown button' class="!rounded-l-lg !rounded-none")
                      button.btn.btn-outline-secondary.txt-secondary.dropdown-toggle.border(type='button' class="hover:text-white" data-bs-toggle='dropdown' aria-expanded='false' class="!rounded-r-lg !rounded-none") Dropdown
                      ul.dropdown-menu.dropdown-menu-end.dropdown-block
                        li
                          a.dropdown-item(href='#!') Starter kit
                        li
                          a.dropdown-item(href='#!') Gallery
                        li
                          a.dropdown-item(href='#!') Blog
                        li
                          hr.dropdown-divider
                        li
                          a.dropdown-item(href='#!') Maps
                    .input-group.dropdown
                      button.btn.btn-primary.dropdown-toggle(type='button' class="[@media(max-width:338px)]:!py-[6px] [@media(max-width:338px)]:!px-[11px]" data-bs-toggle='dropdown' aria-expanded='false' class="!rounded-l-lg !rounded-none") Dropdown
                      ul.dropdown-menu.dropdown-block
                        li
                          a.dropdown-item(href='#!') Widgets
                        li
                          a.dropdown-item(href='#!') Project
                        li
                          a.dropdown-item(href='#!') Contacts
                        li
                          hr.dropdown-divider
                        li
                          a.dropdown-item(href='#!') Tasks
                      input.form-control(type='text' aria-label='Text input with 2 dropdown buttons' class="!rounded-none")
                      button.btn.btn-primary.dropdown-toggle(type='button' class="[@media(max-width:338px)]:!py-[6px] [@media(max-width:338px)]:!px-[11px]" data-bs-toggle='dropdown' aria-expanded='false') Dropdown
                      ul.dropdown-menu.dropdown-menu-end.dropdown-block
                        li
                          a.dropdown-item(href='#!') To-Do
                        li
                          a.dropdown-item(href='#!') FAQ
                        li
                          a.dropdown-item(href='#!') Knowledgebase
                        li
                          hr.dropdown-divider
                        li
                          a.dropdown-item(href='#!') Support Ticket
              div(class="col-span-6 md:col-span-12")
                .card.segmented-btn
                  .card-header
                    h5 Segmented Buttons  
                    p.f-m-light.mt-1 
                      | Multiple add-ons are supported and can be mixed with
                      code  dropdowns
                      |  versions.
                  .card-body.main-segment-btn.card-wrapper.input-group-wrapper
                    .input-group.dropdown
                      button.btn.btn-outline-primary.border(type='button' class="!rounded-l-lg !rounded-none") Primary
                      button.btn.btn-primary.dropdown-toggle.dropdown-toggle-split(type='button' data-bs-toggle='dropdown' class="!rounded-none" aria-expanded='false' class="!m-0")
                        span.visually-hidden
                      ul.dropdown-menu.dropdown-block
                        li
                          a.dropdown-item(href='#') Learning
                        li
                          a.dropdown-item(href='#') Editors
                        li
                          a.dropdown-item(href='#') Users
                        li
                          hr.dropdown-divider
                        li
                          a.dropdown-item(href='#') Social App
                      input.form-control(type='text' aria-label='Text input with segmented dropdown button')
                    .input-group.dropdown
                      input.form-control(type='text' aria-label='Text input with segmented dropdown button')
                      button.btn.btn-outline-secondary.border(type='button' class="!rounded-none") Secondary
                      button.btn.btn-secondary.dropdown-toggle.dropdown-toggle-split(type='button' data-bs-toggle='dropdown' class="!rounded-r-lg !rounded-none text-white" aria-expanded='false' class="!m-0")
                        span.visually-hidden
                      ul.dropdown-menu.dropdown-menu-end.dropdown-block
                        li
                          a.dropdown-item(href='#') Search Result
                        li
                          a.dropdown-item(href='#') Tasks
                        li
                          a.dropdown-item(href='#') Projects
                        li
                          hr.dropdown-divider
                        li
                          a.dropdown-item(href='#') Animation
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Checkboxes and Radios
                    p.f-m-light.mt-1 
                      | 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.
                  .card-body.checkbox-checked.card-wrapper.input-group-wrapper
                    .input-group
                      .input-group-text(class="!rounded-l-lg !rounded-none")
                        input.form-check-input.mt-0(type='checkbox' value='' aria-label='Checkbox for following text input')
                      input.form-control(type='text' aria-label='Text input with checkbox' class="!rounded-r-lg !rounded-none")
                    .input-group
                      .input-group-text(class="!rounded-l-lg !rounded-none")
                        input.form-check-input.mt-0(type='radio' value='' aria-label='Radio button for following text input' checked='')
                      input.form-control(type='text' aria-label='Text input with radio button' class="!rounded-r-lg !rounded-none")
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Sizing
                    p.f-m-light.mt-1 
                      | 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.
                  .card-body.card-wrapper.input-group-wrapper
                    .input-group.input-group-sm
                      span#inputGroup-sizing-sm.input-group-text(class="!rounded-l-lg !rounded-none") Small
                      input.form-control(type='text' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-sm'  class="!rounded-r-lg !rounded-none")
                    .input-group
                      span#inputGroup-sizing-default.input-group-text(class="!rounded-l-lg !rounded-none") Default
                      input.form-control(type='text' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-default'  class="!rounded-r-lg !rounded-none")
                    .input-group.input-group-lg
                      span#inputGroup-sizing-lg.input-group-text(class="!rounded-l-lg !rounded-none") Large
                      input.form-control(type='text' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-lg'  class="!rounded-r-lg !rounded-none")
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Multiple Inputs
                    p.f-m-light.mt-1 
                      | While multiple 
                      code &lt;input&gt;
                      | s are supported visually, validation styles are only available for input groups with a single 
                      code &lt;input&gt;
                      | .
                  .card-body.common-flex.main-custom-form.card-wrapper
                    .input-group
                      span.input-group-text(class="!rounded-l-lg !rounded-none") First and Last Name
                      input.form-control(type='text' aria-label='First name' class="!rounded-none")
                      input.form-control(type='text' aria-label='Last name')
                    .input-group
                      span.input-group-text(class="!rounded-l-lg !rounded-none") $
                      span.input-group-text(class="!rounded-none") 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)' class="!rounded-l-lg !rounded-none")
                      span.input-group-text(class="!rounded-none") $
                      span.input-group-text 0.00
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Basic Input Groups
                    p.f-m-light.mt-1 
                      | 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 &lt;label&gt;
                      | s outside the input group.
                  .card-body
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-12")
                        .card-wrapper.custom-border.rounded-3.main-custom-form.input-group-wrapper
                          h6.sub-title Basic
                          .input-group
                            span#basic-addon1.input-group-text(class="!rounded-l-lg !rounded-none") @
                            input.form-control(type='text' placeholder='Username' aria-label='Username' aria-describedby='basic-addon1')
                          .input-group
                            input.form-control(type='text' placeholder="Recipient's username" aria-label="Recipient's username" class="!rounded-l-lg !rounded-none" aria-describedby='basic-addon2')
                            span#basic-addon2.input-group-text @example.com
                          label.form-label(for='basic-url') Your Vanity URL
                          .input-group
                            span#basic-addon3.input-group-text(class="!rounded-l-lg !rounded-none") https://example.com/
                            input#basic-url.form-control(type='text' aria-describedby='basic-addon3')
                          .input-group
                            span.input-group-text(class="!rounded-l-lg !rounded-none") $
                            input.form-control(type='text' aria-label='Amount (to the nearest dollar)' class="!rounded-none")
                            span.input-group-text .00
                          .input-group
                            input.form-control(type='text' placeholder='Username' aria-label='Username' class="!rounded-l-lg !rounded-none")
                            span.input-group-text(class="!rounded-none") @
                            input.form-control(type='text' placeholder='Server' aria-label='Server')
                          .input-group
                            span.input-group-text(class="!rounded-l-lg !rounded-none") With Textarea
                            textarea.form-control(aria-label='With textarea')
                      div(class="col-span-12")
                        .card-wrapper.custom-border.rounded-3.input-radius
                          h6.sub-title Wrapping 
                          p.f-m-light.mb-1
                            | Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with 
                            code flex-nowrap
                            | .
                          .input-group.flex-nowrap
                            span#addon-wrapping.input-group-text(class="!rounded-l-lg !rounded-none") @
                            input.form-control(type='text' placeholder='Username' aria-label='Username' aria-describedby='addon-wrapping')
                  .card-footer
                    button.btn.btn-primary.text-white(type='submit').m-r-15 Submit
                    button.btn.btn-light(type='submit') Cancel   
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Variation of Addons
                    p.f-m-light.mt-1 
                      | 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 &lt;label&gt;
                      | s outside the input group.
                  .card-body.card-wrapper.input-radius
                    .grid.grid-cols-12
                      div(class="col-span-12")
                        form
                          .mb-3.m-form__group
                            label.form-label Left Addon
                            .input-group
                              span.input-group-text.bg-light-primary(class="!rounded-l-lg !rounded-none")
                                i.icofont.icofont-pencil-alt-5.txt-primary
                              input.form-control(type='text', placeholder='Email')
                          .mb-3
                            label.form-label Right Addon
                            .input-group
                              input.form-control(type='text', placeholder="Recipient's username", class="!rounded-l-lg !rounded-none" aria-label="Recipient's username")
                              span.input-group-text.bg-light-secondary
                                i.icofont.icofont-ui-dial-phone.txt-secondary  
                          .mb-3
                            label.form-label Joint Addon
                            .input-group
                              span.input-group-text.bg-light-primary(class="!rounded-l-lg !rounded-none")
                                i.icofont.icofont-unlink.txt-primary
                              span.input-group-text(class="!rounded-none") 0.00  
                              input.form-control(type='text', aria-label='Amount (to the nearest dollar)')
                          .mb-3
                            label.form-label Left & Right Addon
                            .input-group.mb-3
                              span.input-group-text.bg-light-secondary(class="!rounded-l-lg !rounded-none")
                                i.icofont.icofont-ui-zoom-out.txt-secondary
                              input.form-control(type='text', class="!rounded-none" aria-label='Amount (to the nearest dollar)')
                              span.input-group-text.bg-light-secondary( class="!rounded-r-lg !rounded-none")
                                i.icofont.icofont-ui-zoom-in.txt-secondary
                          .mb-3.input-group-solid
                            label.form-label Solid Style
                            .input-group
                              span.input-group-text.bg-light-primary( class="!rounded-l-lg !rounded-none")
                                i.icofont.icofont-users.txt-primary
                              input.form-control(type='text', placeholder='999999')
                          .mb-3.input-group-square
                            label.form-label Flat Style
                            .input-group
                              span.input-group-text.bg-light-secondary
                                i.icofont.icofont-credit-card.txt-secondary
                              input.form-control(type='text', placeholder='')
                          .mb-3.input-group-square
                            label.form-label Raise Style
                            .input-group
                              span.input-group-text.bg-light-primary
                                i.icofont.icofont-download.txt-primary
                              input.form-control.input-group-air(type='text', placeholder='https://www.example.com')
                          div
                            label.form-label Left & Right Addon
                            .input-group.pill-input-group
                              span.input-group-text.bg-light-secondary( class="!rounded-l-lg !rounded-none")
                                i.icofont.icofont-ui-copy.txt-secondary
                              input.form-control(type='text', aria-label='Amount (to the nearest dollar)'  class="!rounded-none")
                              span.input-group-text.bg-light-secondary( class="!rounded-r-lg !rounded-none")
                                i.icofont.icofont-stock-search.txt-secondary
                  .card-footer
                    button.btn.btn-primary.text-white(type='submit').m-r-15 Submit
                    button.btn.btn-light(type='submit') Cancel    
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
