Input Components

Input components.

Input

Usage

Example

Script


  return (
    <CContainer>
      <CRow>
        <CCol sm="12">
          <CForm action="" method="post">
            <CFormGroup>
              <CLabel htmlFor="nf-email">Email</CLabel>
              <CInput
                type="email"
                id="nf-email"
                name="nf-email"
                placeholder="Enter Email.."
                autoComplete="email"
              />
              <CFormText className="help-block">Please enter your email</CFormText>
            </CFormGroup>
            <CFormGroup>
              <CLabel htmlFor="nf-password">Password</CLabel>
              <CInput
                type="password"
                id="nf-password"
                name="nf-password"
                placeholder="Enter Password.."
                autoComplete="current-password"
              />
              <CFormText className="help-block">Please enter your password</CFormText>
            </CFormGroup>
          </CForm>
        </CCol>
      </CRow>
    </CContainer>
  )

# Features

All-in-one input components
Components share similar API
Use as basic or advanced customized inputs

# Input API

Name	Type	Default Value
plaintext	boolean
plain text mode
type	string	text
type of input tag
size	string
sizeHtml	(string \| number)

InputFile

# InputFile API

Name	Required	Type	Default Value
custom		boolean

InputCheckbox

# InputCheckbox API

Name	Required	Type	Default Value
custom		boolean

InputRadio

InputGroup

Usage

Example

Username

Script


  return (
    <div className={'mt-2 col-6'}>
      <CInputGroup>
        <CInputGroupPrepend>
          <CInputGroupText className={'bg-info text-white'}>
            Username
          </CInputGroupText>
        </CInputGroupPrepend>
        <CInput type="email" id="username" name="username" autoComplete="name"/>
        <CInputGroupAppend>
          <CInputGroupText className={'bg-info text-white'}>
            <CIcon name={'cilUser'}/>
          </CInputGroupText>
        </CInputGroupAppend>
      </CInputGroup>
    </div>
  )

# InputGroup API

Name	Required	Type	Default Value
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag
size		string
input size

InputGroupAddon

# InputGroupAddon API

Name	Required	Type	Default Value
children		any
children components
className		string
user classes for the main HTML tag
innerRef		(object \| Function \| string)
ref to the main tag
prepend		boolean
set the position of addon to prepend (normally append)

InputGroupText

# InputGroupText API

Name	Type	Default Value
tag	any	div
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag

Textarea

# Textarea API

Name	Required	Type	Default Value
plaintext		boolean
size		string

Label

Usage

Example

Name

Script


  return (
    <div>
      <CFormGroup>
        <CLabel htmlFor="name">Name</CLabel>
        <CInput id="name" placeholder="Enter your name" required />
      </CFormGroup>
    </div>
  )

# Label API

Name	Type	Default Value
tag	any	label
main HTML tag name
children	any
children components
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
hidden	boolean
set to hidden
variant	(custom-file \| checkbox \| custom-checkbox)
col	(string \| boolean)