現在就讓我們回到Inputs的部分繼續講解，今天會講解表單中常用的多選(checkbox)的作法。

Checkbox

大家可以搭配官方文件一起使用，如果列表中出現多個選項，則可以使用複選框(checkbox)而不是開/關(switch)來節省空間。如果您只有一個選項，請避免使用複選框(checkbox)並改用開/關(switch)。

// in export function
  const [checked, setChecked] = React.useState(true);
  const handleChange = (event) => {
    setChecked(event.target.checked);
  };

<Checkbox
  checked={checked}
  onChange={handleChange}
  inputProps={{
    "aria-label": "controlled Checkbox color 預設值是secondary的顏色"
  }}
/>
<Checkbox
  defaultChecked
  color="primary"
  inputProps={{ "aria-label": "primary color Checkbox" }}
/>
<Checkbox inputProps={{ "aria-label": "uncontrolled-checkbox" }} />
<Checkbox disabled inputProps={{ "aria-label": "disabled checkbox" }} />
<Checkbox
  disabled
  checked
  inputProps={{ "aria-label": "disabled checked checkbox" }}
/>
<Checkbox
  defaultChecked
  indeterminate
  inputProps={{ "aria-label": "indeterminate checkbox" }}
/>
<Checkbox
  defaultChecked
  color="default"
  inputProps={{ "aria-label": "checkbox with default color" }}
/>
<Checkbox
  defaultChecked
  size="small"
  icon={<FavoriteBorder />}
  checkedIcon={<Favorite />}
  inputProps={{ "aria-label": "checkbox 更換 size 和 Icon 樣式" }}
/>

透過 FormControlLabel 控制 Checkbox，並整合 label 進同一個組件中:

<FormControlLabel control={<Checkbox name="checkedC" />} label="Uncontrolled" />

詳細的話可以參考官方文件的範例，關於FormControlLabel它能控制Checkbox, Switch, Radio 這三個組件並賦予標籤。
也可以透過以下方式更改為其他使用方式

const useStyles = makeStyles({
  greenBtn: {
    minWidth: 100,
    background: lightGreen[200],
    borderRadius: 10,
    padding: 4,
    "& :hover":{
      color: lightGreen[900],
    },
  },
  checked: {
    background: pink[300],
  },
});
export default const App = () => {
  const classes = useStyles();
  const [ checked, setChecked ] = React.useState(faulse);
  return (
    <div>
      <FormControlLabel
        control={<Checkbox style={{ display: 'none'}}/>}
        label="替換按鈕"
        labelPlacement="top"
        checked={checked}
        onChange={e => setChecked(e.target.checked)}
        className={`${classes.greenBtn} ${checked && classes.checked}`}
      />
    </div>
  );
}

使用FormGroup控制多個Checkbox:

// in function export
const [state, setState] = React.useState({
  gilad: true,
  jason: false,
  antoine: false,
});

const handleChange = (event) => {
  setState({ ...state, [event.target.name]: event.target.checked });
};
const { gilad, jason, antoine } = state;
const error = [gilad, jason, antoine].filter((v) => v).length !== 2;

// in return
<FormControl required error={error} component="fieldset" >
  <FormLabel component="legend">Pick two</FormLabel>
    <FormGroup>
      <FormControlLabel
        control={
          <Checkbox
            checked={gilad}
            onChange={handleChange}
            name="gilad"
          />
        }
        label="Gilad Gray"
      />
      <FormControlLabel
        control={
          <Checkbox
            checked={jason}
            onChange={handleChange}
            name="jason"
          />
        }
        label="Jason Killian"
      />
      <FormControlLabel
        control={
          <Checkbox
            checked={antoine}
            onChange={handleChange}
            name="antoine"
          />
        }
        label="Antoine Llorca"
      />
    </FormGroup>
  <FormHelperText>You can display an error</FormHelperText>
</FormControl>

錯誤的部分可以考慮搭配formik或是react-hook-form來做檢核使用，之後有機會再示範material ui + react-hook-form的用法，那麼今天的內容就先到這裡，明天將講解單選框(Radio)的部分，附上今天的source code example。