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

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

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

block view
  +docs-components('https://coreui.io/docs/forms/floating-labels/')
  .row
    .col-12
      .card.mb-4
        .card-header
          strong Floating labels
          span.small.ms-1 Basic example
        .card-body
          p.text-body-secondary.small
            | Wrap a pair of 
            code
              = '<input class="form-control">'
            |  and 
            code
              = '<label>'
            |  elements in 
            code .form-floating
            |  to enable floating labels with Bootstrap’s textual form fields. A 
            code placeholder
            |  is required on each 
            code
              = '<input>'
            |  as our method of CSS-only floating labels uses the 
            code :placeholder-shown
            |  pseudo-element. Also note that the 
            code
              = '<input>'
            |  must come first so we can utilize a sibling selector (e.g., 
            code ~
            | ).
          +example('https://coreui.io/docs/forms/floating-labels/#example')
            .form-floating.mb-3
              input.form-control#floatingInput(type='email' placeholder='name@example.com')
              label(for='floatingInput') Email address
            .form-floating
              input.form-control#floatingPassword(type='password' placeholder='Password')
              label(for='floatingPassword') Password
          p.text-body-secondary.small
            | When there’s a 
            code value
            |  already defined, 
            code
              = '<label>'
            | s will automatically adjust to their floated position.
          +example('https://coreui.io/docs/forms/floating-labels/#example')
            form.form-floating
              input.form-control#floatingInputValue(type='email' placeholder='name@example.com' value='test@example.com')
              label(for='floatingInputValue') Input with value
          p.text-body-secondary.small Form validation styles also work as expected.
          +example('https://coreui.io/docs/forms/floating-labels/#example')
            form.form-floating
              input.form-control.is-invalid#floatingInputInvalid(type='email' placeholder='name@example.com' value='test@example.com')
              label(for='floatingInputInvalid') Invalid input
    .col-12
      .card.mb-4
        .card-header
          strong Floating labels
          span.small.ms-1 Textareas
        .card-body
          p.text-body-secondary.small
            | By default, 
            code
              = '<textarea>'
            | s with 
            code .form-control
            |  will be the same height as 
            code
              = '<input>'
            | s.
          +example('https://coreui.io/docs/forms/floating-labels/#textareas')
            .form-floating
              textarea.form-control#floatingTextarea(placeholder='Leave a comment here')
              label(for='floatingTextarea') Comments
          p.text-body-secondary.small
            | To set a custom height on your 
            code
              = '<textarea>'
            | , do not use the 
            code rows
            |  attribute. Instead, set an explicit 
            code height
            |  (either inline or via custom CSS).
          +example('https://coreui.io/docs/forms/floating-labels/#textareas')
            .form-floating
              textarea.form-control#floatingTextarea2(placeholder='Leave a comment here' style='height: 100px')
              label(for='floatingTextarea2') Comments
    .col-12
      .card.mb-4
        .card-header
          strong Floating labels
          span.small.ms-1 Selects
        .card-body
          p.text-body-secondary.small
            | Other than 
            code .form-control
            | , floating labels are only available on 
            code .form-select
            | s. They work in the same way, but unlike 
            code
              = '<input>'
            | s, they’ll always show the 
            code
              = '<label>'
            |  in its floated state.
            strong
              | Selects with 
              code size
              |  and 
              code multiple
              |  are not supported.
          +example('https://coreui.io/docs/forms/floating-labels/#selects')
            .form-floating
              select.form-select#floatingSelect(aria-label='Floating label select example')
                option(selected) Open this select menu
                option(value='1') One
                option(value='2') Two
                option(value='3') Three
              label(for='floatingSelect') Works with selects
    .col-12
      .card.mb-4
        .card-header
          strong Floating labels
          span.small.ms-1 Layout
        .card-body
          p.text-body-secondary.small When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.
          +example('https://coreui.io/docs/forms/floating-labels/#layout')
            .row.g-2
              .col-md
                .form-floating
                  input.form-control#floatingInputGrid(type='email' placeholder='name@example.com' value='mdo@example.com')
                  label(for='floatingInputGrid') Email address
              .col-md
                .form-floating
                  select.form-select#floatingSelectGrid(aria-label='Floating label select example')
                    option(selected) Open this select menu
                    option(value='1') One
                    option(value='2') Two
                    option(value='3') Three
                  label(for='floatingSelectGrid') Works with selects