import React from 'react' import { CButton, CCard, CCardBody, CCardFooter, CCardHeader, CCol, CCollapse, CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle, CFade, CForm, CFormCheck, CFormControl, CFormFeedback, CFormLabel, CFormText, CFormSelect, CInputGroup, CInputGroupText, CRow, } from '@coreui/react' import CIcon from '@coreui/icons-react' import { DocsLink } from 'src/reusable' const BasicForms = () => { const [collapsed, setCollapsed] = React.useState(true) const [showElements, setShowElements] = React.useState(true) return ( <> Credit Card Form
Name
Credit Card Number
Month
Year
CVV/CVC
Company Form
Company
VAT
Street
City
Postal Code
Country
Basic Form Elements Static

Username

 Text Input This is a help text Email Input Please enter your email Password Please enter a complex password Date Input Disabled Input Textarea Select Select Large Select Small Disabled Select Switch checkboxes Radios
Inline Radios
Checkboxes
Inline Checkboxes
File input Multiple File input Choose Files... Custom file input Choose file... Submit Reset Inline Form
Name
Email
Submit Reset Horizontal Form Email Please enter your email Password Please enter your password Submit {' '} Reset Normal Form
Email Please enter your email
Password Please enter your password
Submit {' '} Reset Input Grid Login {' '} Reset Input Sizes Small Input Normal Input Large Input Submit Reset Form validation feedback
Input is valid Cool! Input is valid
Input is invalid Houston, we have a problem...
Validation feedback Form
Non-required input Non-required
Required input Please provide a valid information Input provided
Icon/Text Groups .00 Submit Reset Button Groups Search Submit Submit Reset Dropdowns Groups Dropdown Action Another Action Something else here Separated link Dropdown Action Another Action Something else here Separated link Action Action Another Action Something else here Separated link Dropdown Action Another Action Something else here Separated link Submit Reset Use the grid for big devices! {' '} .col-lg-* .col-md-* .col-sm-* Action Action Action Action Action Input Grid for small devices! {' '} .col-* Action Action Action Action Action Example Form
Username
Email
Password
Submit
Example Form
Submit
Example Form
Submit
Form Elements
setCollapsed(!collapsed)} > setShowElements(false)} >
Prepended text
@

Here's some help text

Appended text
.00 Here's more help text
Append and prepend
$ .00
Append with button
Go!
Two-button append
Search Options
Save changes Cancel
) } export default BasicForms