Form

React forms support the following form controls: input, textarea, button, checkbox, radio, and select. Learn how to build various types of form layouts such as vertical form, horizontal form and inline from quickly and easily with the CoreUI.

Usage

Example

Script


  return (
    <CContainer fluid>
      <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>
  )

# Form API

Name	Type	Default Value
tag	any	form
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
inline	boolean
set inline style of the form.
wasValidated	boolean
adds initial validation to the form

FormFeedback

# FormFeedback 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
valid		boolean
set valid state
tooltip		boolean
set validation mode (from feedback) to tooltip

FormGroup

# FormGroup 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
row		boolean
set the type of the group to row
variant		(checkbox \| custom-checkbox \| custom-radio)
set the variant of form group
inline		boolean
inline mode
disabled		boolean
set state to disabled

FormText

# FormText API

Name	Type	Default Value
tag	any	small
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
color	string	muted
set text color