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

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

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

block view
  +docs-components('https://coreui.io/docs/forms/form-control/')
  .row
    .col-12
      .card.mb-4
        .card-header
          strong Form control
          span.small.ms-1 Basic example
        .card-body
          +example('https://coreui.io/docs/forms/form-control/')
            .mb-3
              label.form-label(for='exampleFormControlInput1') Email address
              input.form-control#exampleFormControlInput1(type='email' placeholder='name@example.com')
            .mb-3
              label.form-label(for='exampleFormControlTextarea1') Example textarea
              textarea.form-control#exampleFormControlTextarea1(rows='3')
    .col-12
      .card.mb-4
        .card-header
          strong Form control
          span.small.ms-1 Sizing
        .card-body
          p.text-body-secondary.small
            | Set heights using classes like 
            code .form-control-lg
            |  and 
            code .form-control-sm
            | .
          +example('https://coreui.io/docs/forms/form-control/#sizing')
            input.form-control.form-control-lg(type='text' placeholder='.form-control-lg' aria-label='.form-control-lg example')
            input.form-control(type='text' placeholder='Default input' aria-label='default input example')
            input.form-control.form-control-sm(type='text' placeholder='.form-control-sm' aria-label='.form-control-sm example')
    .col-12
      .card.mb-4
        .card-header
          strong Form control
          span.small.ms-1 Disabled
        .card-body
          p.text-body-secondary.small
            | Add the 
            code disabled
            |  boolean attribute on an input to give it a grayed out appearance and remove pointer events.
          +example('https://coreui.io/docs/forms/form-control/#disabled')
            input.form-control(type='text' placeholder='Disabled input' aria-label='Disabled input example' disabled)
            input.form-control(type='text' placeholder='Disabled readonly input' aria-label='Disabled input example' disabled readonly)
    .col-12
      .card.mb-4
        .card-header
          strong Form control
          span.small.ms-1 Readonly
        .card-body
          p.text-body-secondary.small
            | Add the 
            code readonly
            |  boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
          +example('https://coreui.io/docs/forms/form-control/#readonly')
            input.form-control(type='text' placeholder='Readonly input here...' aria-label='readonly input example' readonly)
    .col-12
      .card.mb-4
        .card-header
          strong Form control
          span.small.ms-1 Readonly plain text
        .card-body
          p.text-body-secondary.small
            | If you want to have 
            code
              = '<input readonly>'
            |  elements in your form styled as plain text, use the 
            code .form-control-plaintext
            |  class to remove the default form field styling and preserve the correct margin and padding.
          +example('https://coreui.io/docs/forms/form-control/#readonly-plain-text')
            .mb-3.row
              label.col-sm-2.col-form-label(for='staticEmail') Email
              .col-sm-10
                input.form-control-plaintext#staticEmail(type='text' readonly value='email@example.com')
            .mb-3.row
              label.col-sm-2.col-form-label(for='inputPassword') Password
              .col-sm-10
                input.form-control#inputPassword(type='password')
          +example('https://coreui.io/docs/forms/form-control/#readonly-plain-text')
            form.row.g-3
              .col-auto
                label.visually-hidden(for='staticEmail2') Email
                input.form-control-plaintext#staticEmail2(type='text' readonly value='email@example.com')
              .col-auto
                label.visually-hidden(for='inputPassword2') Password
                input.form-control#inputPassword2(type='password' placeholder='Password')
              .col-auto
            button.btn.btn-primary.mb-3(type='submit') Confirm identity
    .col-12
      .card.mb-4
        .card-header
          strong Form control
          span.small.ms-1 File input
        .card-body
          +example('https://coreui.io/docs/forms/form-control/#file-input')
            .mb-3
              label.form-label(for='formFile') Default file input example
              input.form-control#formFile(type='file')
            .mb-3
              label.form-label(for='formFileMultiple') Multiple files input example
              input.form-control#formFileMultiple(type='file' multiple)
            .mb-3
              label.form-label(for='formFileDisabled') Disabled file input example
              input.form-control#formFileDisabled(type='file' disabled)
            .mb-3
              label.form-label(for='formFileSm') Small file input example
              input.form-control.form-control-sm#formFileSm(type='file')
            div
              label.form-label(for='formFileLg') Large file input example
              input.form-control.form-control-lg#formFileLg(type='file')
    .col-12
      .card.mb-4
        .card-header
          strong Form control
          span.small.ms-1 Color
        .card-body
          +example('https://coreui.io/docs/forms/form-control/#color')
            label.form-label(for='exampleColorInput') Color picker
            input.form-control.form-control-color#exampleColorInput(type='color' value='#563d7c' title='Choose your color')
    .col-12
      .card.mb-4
        .card-header
          strong Form control
          span.small.ms-1 Datalists
        .card-body
          p.text-body-secondary.small
            | Datalists allow you to create a group of 
            code
             = '<option>'
            | s that can be accessed (and autocompleted) from within an 
            code
             = '<input>'
            | . These are similar to 
            code
              = '<select>'
            |  elements, but come with more menu styling limitations and differences. While most browsers and operating systems include some support for 
            code
              = '<datalist>'
            |  elements, their styling is inconsistent at best.
          p.text-body-secondary.small
            | Learn more about 
            a(href='https://caniuse.com/datalist') support for datalist elements
            | .
          +example('https://coreui.io/docs/forms/form-control/#datalists')
            label.form-label(for='exampleDataList') Datalist example
            input.form-control#exampleDataList(list='datalistOptions' placeholder='Type to search...')
            datalist#datalistOptions
              option(value='San Francisco').
              option(value='New York').
              option(value='Seattle').
              option(value='Los Angeles').
              option(value='Chicago').