import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import FormLabel from "@material-ui/core/FormLabel";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import InputAdornment from "@material-ui/core/InputAdornment";
import Radio from "@material-ui/core/Radio";
import Checkbox from "@material-ui/core/Checkbox";
// @material-ui/icons
import MailOutline from "@material-ui/icons/MailOutline";
import Check from "@material-ui/icons/Check";
import Clear from "@material-ui/icons/Clear";
import Contacts from "@material-ui/icons/Contacts";
import FiberManualRecord from "@material-ui/icons/FiberManualRecord";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import Button from "components/CustomButtons/Button.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardText from "components/Card/CardText.js";
import CardIcon from "components/Card/CardIcon.js";
import CardBody from "components/Card/CardBody.js";
import styles from "assets/jss/material-dashboard-pro-react/views/regularFormsStyle";
const useStyles = makeStyles(styles);
export default function RegularForms() {
const [checked, setChecked] = React.useState([24, 22]);
const [selectedEnabled, setSelectedEnabled] = React.useState("b");
const [selectedValue, setSelectedValue] = React.useState(null);
const handleChange = event => {
setSelectedValue(event.target.value);
};
const handleChangeEnabled = event => {
setSelectedEnabled(event.target.value);
};
const handleToggle = value => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
const classes = useStyles();
return (
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<Card>
<CardHeader color="rose" icon>
<CardIcon color="rose">
<MailOutline />
</CardIcon>
<h4 className={classes.cardIconTitle}>Stacked Form</h4>
</CardHeader>
<CardBody>
<form>
<CustomInput
labelText="Email adress"
id="email_adress"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "email"
}}
/>
<CustomInput
labelText="Password"
id="password"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "password",
autoComplete: "off"
}}
/>
<div className={classes.checkboxAndRadio}>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(2)}
checkedIcon={<Check className={classes.checkedIcon} />}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="Subscribe to newsletter"
/>
</div>
<Button color="rose">Submit</Button>
</form>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<Card>
<CardHeader color="rose" icon>
<CardIcon color="rose">
<Contacts />
</CardIcon>
<h4 className={classes.cardIconTitle}>Horizontal Form</h4>
</CardHeader>
<CardBody>
<form>
<GridContainer>
<GridItem xs={12} sm={12} md={3}>
<FormLabel className={classes.labelHorizontal}>
Email
</FormLabel>
</GridItem>
<GridItem xs={12} sm={12} md={9}>
<CustomInput
id="email_adress2"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "email"
}}
/>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={3}>
<FormLabel className={classes.labelHorizontal}>
Password
</FormLabel>
</GridItem>
<GridItem xs={12} sm={12} md={9}>
<CustomInput
id="password2"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "password",
autoComplete: "off"
}}
/>
</GridItem>
</GridContainer>
<GridContainer justify="flex-end">
<GridItem xs={12} sm={12} md={9}>
<div className={classes.checkboxAndRadio}>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(1)}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="Remember me"
/>
</div>
</GridItem>
</GridContainer>
<GridContainer justify="flex-end">
<GridItem xs={12} sm={12} md={9}>
<Button color="rose">Submit</Button>
</GridItem>
</GridContainer>
</form>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={12}>
<Card>
<CardHeader color="rose" text>
<CardText color="rose">
<h4 className={classes.cardTitle}>Form Elements</h4>
</CardText>
</CardHeader>
<CardBody>
<form>
<GridContainer>
<GridItem xs={12} sm={2}>
<FormLabel className={classes.labelHorizontal}>
With Help
</FormLabel>
</GridItem>
<GridItem xs={12} sm={10}>
<CustomInput
id="help-text"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "text"
}}
helpText="A block of help text that breaks onto a new line."
/>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={2}>
<FormLabel className={classes.labelHorizontal}>
Password
</FormLabel>
</GridItem>
<GridItem xs={12} sm={10}>
<CustomInput
id="pass"
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "password",
autoComplete: "off"
}}
/>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={2}>
<FormLabel className={classes.labelHorizontal}>
Placeholder
</FormLabel>
</GridItem>
<GridItem xs={12} sm={10}>
<CustomInput
id="placeholder"
formControlProps={{
fullWidth: true
}}
inputProps={{
placeholder: "placeholder"
}}
/>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={2}>
<FormLabel className={classes.labelHorizontal}>
Disabled
</FormLabel>
</GridItem>
<GridItem xs={12} sm={10}>
<CustomInput
id="disabled"
formControlProps={{
fullWidth: true
}}
inputProps={{
placeholder: "Disabled",
disabled: true
}}
/>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={2}>
<FormLabel className={classes.labelHorizontal}>
Static control
</FormLabel>
</GridItem>
<GridItem xs={12} sm={10}>
<div className={classes.staticFormGroup}>
<p className={classes.staticFormControl}>
hello@creative-tim.com
</p>
</div>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={2}>
<FormLabel
className={
classes.labelHorizontal +
" " +
classes.labelHorizontalRadioCheckbox
}
>
Checkboxes and radios
</FormLabel>
</GridItem>
<GridItem xs={12} sm={10}>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(3)}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="First Checkbox"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(4)}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="Second Checkbox"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Radio
checked={selectedValue === "a"}
onChange={handleChange}
value="a"
name="radio button demo"
aria-label="A"
icon={
<FiberManualRecord
className={classes.radioUnchecked}
/>
}
checkedIcon={
<FiberManualRecord
className={classes.radioChecked}
/>
}
classes={{
checked: classes.radio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="First Radio"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Radio
checked={selectedValue === "b"}
onChange={handleChange}
value="b"
name="radio button demo"
aria-label="B"
icon={
<FiberManualRecord
className={classes.radioUnchecked}
/>
}
checkedIcon={
<FiberManualRecord
className={classes.radioChecked}
/>
}
classes={{
checked: classes.radio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="Second Radio"
/>
</div>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={2}>
<FormLabel
className={
classes.labelHorizontal +
" " +
classes.labelHorizontalRadioCheckbox
}
>
Inline checkboxes
</FormLabel>
</GridItem>
<GridItem xs={12} sm={10}>
<div className={classes.inlineChecks}>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(10)}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="a"
/>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(11)}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="b"
/>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(12)}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="c"
/>
</div>
</GridItem>
</GridContainer>
</form>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={12}>
<Card>
<CardHeader color="primary" text>
<CardText color="primary">
<h4 className={classes.cardTitle}>Input Variants</h4>
</CardText>
</CardHeader>
<CardBody>
<form>
<GridContainer>
<GridItem xs={12} sm={2}>
<FormLabel
className={
classes.labelHorizontal +
" " +
classes.labelHorizontalRadioCheckbox
}
>
Custom Checkboxes & Radios
</FormLabel>
</GridItem>
<GridItem xs={12} sm={4}>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(21)}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="Unchecked"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(22)}
checked={checked.indexOf(22) !== -1 ? true : false}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="Checked"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Checkbox
tabIndex={-1}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
disabled: classes.disabledCheckboxAndRadio,
root: classes.labelRoot
}}
label="Disabled Unchecked"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Checkbox
tabIndex={-1}
checked={checked.indexOf(24) !== -1 ? true : false}
checkedIcon={
<Check className={classes.checkedIcon} />
}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
disabled: classes.disabledCheckboxAndRadio,
root: classes.labelRoot
}}
label="Disabled Checked"
/>
</div>
</GridItem>
<GridItem xs={12} sm={4}>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Radio
checked={selectedEnabled === "a"}
onChange={handleChangeEnabled}
value="a"
name="radio button enabled"
aria-label="A"
icon={
<FiberManualRecord
className={classes.radioUnchecked}
/>
}
checkedIcon={
<FiberManualRecord
className={classes.radioChecked}
/>
}
classes={{
checked: classes.radio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="First Radio"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Radio
checked={selectedEnabled === "b"}
onChange={handleChangeEnabled}
value="b"
name="radio button enabled"
aria-label="B"
icon={
<FiberManualRecord
className={classes.radioUnchecked}
/>
}
checkedIcon={
<FiberManualRecord
className={classes.radioChecked}
/>
}
classes={{
checked: classes.radio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="Second Radio"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Radio
checked={false}
value="a"
name="radio button disabled"
aria-label="B"
icon={
<FiberManualRecord
className={classes.radioUnchecked}
/>
}
checkedIcon={
<FiberManualRecord
className={classes.radioChecked}
/>
}
classes={{
checked: classes.radio,
disabled: classes.disabledCheckboxAndRadio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="Second Radio"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Radio
checked={true}
value="b"
name="radio button disabled"
aria-label="B"
icon={
<FiberManualRecord
className={classes.radioUnchecked}
/>
}
checkedIcon={
<FiberManualRecord
className={classes.radioChecked}
/>
}
classes={{
checked: classes.radio,
disabled: classes.disabledCheckboxAndRadio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="Second Radio"
/>
</div>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={2}>
<FormLabel className={classes.labelHorizontal}>
Input with success
</FormLabel>
</GridItem>
<GridItem xs={12} sm={10}>
<CustomInput
id="success"
labelText="Success"
formControlProps={{
fullWidth: true
}}
inputProps={{
endAdornment: (
<InputAdornment
position="end"
className={classes.inputAdornment}
>
<Check
className={classes.inputAdornmentIconSuccess}
/>
</InputAdornment>
)
}}
success
/>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={2}>
<FormLabel className={classes.labelHorizontal}>
Input with error
</FormLabel>
</GridItem>
<GridItem xs={12} sm={10}>
<CustomInput
id="error"
labelText="Error"
formControlProps={{
fullWidth: true
}}
inputProps={{
endAdornment: (
<InputAdornment
position="end"
className={classes.inputAdornment}
>
<Clear className={classes.inputAdornmentIconError} />
</InputAdornment>
)
}}
error
/>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={2}>
<FormLabel className={classes.labelHorizontal}>
Column sizing
</FormLabel>
</GridItem>
<GridItem xs={12} sm={10}>
<GridContainer>
<GridItem xs={12} sm={12} md={3}>
<CustomInput
id="md3"
formControlProps={{
fullWidth: true
}}
inputProps={{
placeholder: "md={3}"
}}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<CustomInput
id="md4"
formControlProps={{
fullWidth: true
}}
inputProps={{
placeholder: "md={4}"
}}
/>
</GridItem>
<GridItem xs={12} sm={12} md={5}>
<CustomInput
id="md5"
formControlProps={{
fullWidth: true
}}
inputProps={{
placeholder: "md={5}"
}}
/>
</GridItem>
</GridContainer>
</GridItem>
</GridContainer>
</form>
</CardBody>
</Card>
</GridItem>
</GridContainer>
);
}