React Form Controls

import { CForm, CFormInput, CFormLabel, CFormTextarea } from '@coreui/react'

export const FormControlExample = () => (
  <CForm>
    <div className="mb-3">
      <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
      <CFormInput type="email" id="exampleFormControlInput1" placeholder="[email protected]" />
    </div>
    <div className="mb-3">
      <CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
      <CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
    </div>
  </CForm>
)

import { CFormInput } from '@coreui/react'

export const FormControlSizingExample = () => (
  <>
    <CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example" />
    <CFormInput type="text" placeholder="Default input" aria-label="default input example" />
    <CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example" />
  </>
)

import { CFormInput } from '@coreui/react'

export const FormControlDisabledExample = () => (
  <>
    <CFormInput
      type="text"
      placeholder="Disabled input"
      aria-label="Disabled input example"
      disabled
    />
    <CFormInput
      type="text"
      placeholder="Disabled readonly input"
      aria-label="Disabled input example"
      disabled
      readOnly
    />
  </>
)

import { CFormInput } from '@coreui/react'

export const FormControlReadonlyExample = () => (
  <CFormInput
    type="text"
    placeholder="Readonly input here..."
    aria-label="readonly input example"
    readOnly
  />
)

import { CCol, CFormInput, CFormLabel, CRow } from '@coreui/react'

export const FormControlReadonlyPlainTextExample = () => (
  <>
    <CRow className="mb-3">
      <CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
        Email
      </CFormLabel>
      <CCol sm={10}>
        <CFormInput
          type="text"
          id="staticEmail"
          defaultValue="[email protected]"
          readOnly
          plainText
        />
      </CCol>
    </CRow>
    <CRow className="mb-3">
      <CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">
        Password
      </CFormLabel>
      <CCol sm={10}>
        <CFormInput type="password" id="inputPassword" />
      </CCol>
    </CRow>
  </>
)

import { CButton, CCol, CForm, CFormInput, CFormLabel } from '@coreui/react'

export const FormControlReadonlyPlainTextInlineExample = () => (
  <CForm className="row g-3">
    <CCol xs="auto">
      <CFormLabel htmlFor="staticEmail2" className="visually-hidden">
        Email
      </CFormLabel>
      <CFormInput
        type="text"
        id="staticEmail2"
        defaultValue="[email protected]"
        readOnly
        plainText
      />
    </CCol>
    <CCol xs="auto">
      <CFormLabel htmlFor="inputPassword2" className="visually-hidden">
        Password
      </CFormLabel>
      <CFormInput type="password" id="inputPassword2" placeholder="Password" />
    </CCol>
    <CCol xs="auto">
      <CButton color="primary" type="submit" className="mb-3">
        Confirm identity
      </CButton>
    </CCol>
  </CForm>
)

import { CFormInput, CFormLabel } from '@coreui/react'

export const FormControlFileInputExample = () => (
  <>
    <div className="mb-3">
      <CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
      <CFormInput type="file" id="formFile" />
    </div>
    <div className="mb-3">
      <CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
      <CFormInput type="file" id="formFileMultiple" multiple />
    </div>
    <div className="mb-3">
      <CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
      <CFormInput type="file" id="formFileDisabled" disabled />
    </div>
    <div className="mb-3">
      <CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
      <CFormInput type="file" size="sm" id="formFileSm" />
    </div>
    <div>
      <CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
      <CFormInput type="file" size="lg" id="formFileLg" />
    </div>
  </>
)

import { CFormInput, CFormLabel } from '@coreui/react'

export const FormControlColorExample = () => (
  <>
    <CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
    <CFormInput
      type="color"
      id="exampleColorInput"
      defaultValue="#563d7c"
      title="Choose your color"
    />
  </>
)