import React from 'react'
import {
CButton,
CCard,
CCardBody,
CCardFooter,
CCardHeader,
CCol,
CCollapse,
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CFade,
CForm,
CFormGroup,
CFormText,
CValidFeedback,
CInvalidFeedback,
CTextarea,
CInput,
CInputFile,
CInputCheckbox,
CInputRadio,
CInputGroup,
CInputGroupAppend,
CInputGroupPrepend,
CDropdown,
CInputGroupText,
CLabel,
CSelect,
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
NameCredit Card NumberMonthYearCVV/CVC
Company
Form
CompanyVATStreetCityPostal CodeCountry
Basic Form
Elements
Static
Username
Text InputThis is a help textEmail InputPlease enter your emailPasswordPlease enter a complex passwordDate InputDisabled InputTextareaSelectSelect LargeSelect SmallDisabled SelectRadiosOption 1Option 2Option 3Inline RadiosOneTwoThreeCheckboxesOption 1Option 2Option 3Inline CheckboxesOneTwoThreeFile inputMultiple File input
Choose Files...
Custom file input
Choose file...
Submit Reset
Inline
Form
NameEmail Submit Reset
Horizontal
Form
EmailPlease enter your emailPasswordPlease enter your password Submit Reset
Normal
Form
EmailPlease enter your emailPasswordPlease enter your password Submit Reset
Input
Grid
Login Reset
Input
Sizes
Small InputNormal InputLarge Input Submit Reset
Form
validation feedback
Input is validCool! Input is validInput is invalidHouston, we have a problem...
Validation feedback Form
Non-required inputNon-requiredRequired input
Please provide a valid information
Input provided
Icon/Text Groups
.00 Submit Reset
Button Groups
SearchSubmit Submit Reset
Dropdowns Groups
Dropdown
ActionAnother ActionSomething else hereSeparated link
Dropdown
ActionAnother ActionSomething else hereSeparated linkActionActionAnother ActionSomething else hereSeparated link
Dropdown
ActionAnother ActionSomething else hereSeparated link Submit Reset
Use the grid for big devices!
.col-lg-*.col-md-*.col-sm-*ActionActionActionActionAction
Input Grid for small devices!
.col-*ActionActionActionActionAction
Example Form
UsernameEmailPasswordSubmit
Example Form
Submit
Example Form
Submit
Form Elements