Selects

() => {
  const [values, setValues] = React.useState({ age: '', name: 'Mae' });

  const handleChange = (e, name) => {
    setValues({ ...values, [name]: e.target.value });
  };

  const ages = (
    <>
      <option value="" />
      <option value={10}>Ten</option>
      <option value={20}>Twenty</option>
      <option value={30}>Thirty</option>
    </>
  );

  const names = (
    <>
      <option value="" />
      <option value="Steph">Steph</option>
      <option value="Emily">Emily</option>
      <option value="Jeni">Jeni</option>
    </>
  );

  return (
    <Grid container spacing={3}>
      <Grid item sm={6}>
        <FormControl variant="outlined" fullWidth>
          <InputLabel htmlFor="age-native-simple">Age</InputLabel>
          <Select
            variant="outlined"
            native
            value={values['age']}
            onChange={(e) => handleChange(e, 'age')}
            inputProps={{
              name: 'age',
              id: 'age-native-simple',
            }}
          >
            {ages}
          </Select>
        </FormControl>
      </Grid>
      <Grid item sm={6}>
        <FormControl variant="outlined" fullWidth>
          <InputLabel htmlFor="age-native-helper">Age</InputLabel>
          <Select
            variant="outlined"
            native
            value={values['age']}
            onChange={(e) => handleChange(e, 'age')}
            inputProps={{
              name: 'age',
              id: 'age-native-helper',
              'aria-describedby': 'age-native-helper-text',
            }}
          >
            {ages}
          </Select>
          <FormHelperText id="age-native-helper-text">Some important helper text</FormHelperText>
        </FormControl>
      </Grid>
      <Grid item sm={6}>
        <FormControl variant="outlined" fullWidth>
          <InputLabel shrink htmlFor="age-native-label-placeholder">
            Age
          </InputLabel>
          <Select
            variant="outlined"
            native
            labelWidth={35}
            inputProps={{
              name: 'age',
              id: 'age-native-label-placeholder',
              'aria-describedby': 'age-native-label-placeholder-text',
            }}
          >
            <option value="">None</option>
            <option value={10}>Ten</option>
            <option value={20}>Twenty</option>
            <option value={30}>Thirty</option>
          </Select>
          <FormHelperText id="age-native-label-placeholder-text">
            Label + Placeholder
          </FormHelperText>
        </FormControl>
      </Grid>
      <Grid item sm={6}>
        <FormControl variant="outlined" disabled fullWidth>
          <InputLabel htmlFor="name-disabled">Name</InputLabel>
          <Select
            variant="outlined"
            native
            value={values['name']}
            disabled
            inputProps={{
              name: 'name',
              id: 'name-disabled',
              'aria-describedby': 'name-disabled-text',
            }}
          >
            {names}
          </Select>
          <FormHelperText id="name-disabled-text">Disabled</FormHelperText>
        </FormControl>
      </Grid>
      <Grid item sm={6}>
        <FormControl variant="outlined" error fullWidth>
          <InputLabel htmlFor="name-error">Name</InputLabel>
          <Select
            variant="outlined"
            native
            value={values['name']}
            error
            inputProps={{
              name: 'name',
              id: 'name-error',
              'aria-describedby': 'name-error-text',
            }}
          >
            {names}
          </Select>
          <FormHelperText id="name-error-text">Error</FormHelperText>
        </FormControl>
      </Grid>
      <Grid item sm={6}>
        <FormControl variant="outlined" fullWidth fullWidth>
          <InputLabel htmlFor="name-uncontrolled">Name</InputLabel>
          <Select
            variant="outlined"
            native
            inputProps={{
              name: 'name',
              id: 'name-uncontrolled',
              'aria-describedby': 'name-uncontrolled-text',
            }}
          >
            {names}
          </Select>
          <FormHelperText id="name-uncontrolled-text">Uncontrolled</FormHelperText>
        </FormControl>
      </Grid>
      <Grid item sm={6}>
        <FormControl variant="outlined" required fullWidth>
          <InputLabel htmlFor="name-required">Name</InputLabel>
          <Select
            variant="outlined"
            native
            inputProps={{
              name: 'name',
              id: 'name-required',
              'aria-describedby': 'name-required-text',
            }}
          >
            {names}
          </Select>
          <FormHelperText id="name-required-text">Required</FormHelperText>
        </FormControl>
      </Grid>
      <Grid item sm={6}>
        <FormControl variant="filled">
          <InputLabel htmlFor="age-native-filled">Age</InputLabel>
          <Select
            variant="filled"
            native
            value={values['age']}
            onChange={(e) => handleChange(e, 'age')}
            inputProps={{
              name: 'age',
              id: 'age-native-filled',
            }}
          >
            {ages}
          </Select>
        </FormControl>
      </Grid>
    </Grid>
  );
};

function MultipleSelect() {
  const [personName, setPersonName] = React.useState([]);

  function handleChange(event) {
    setPersonName(event.target.value);
  }

  function handleChangeMultiple(event) {
    const { options } = event.target;
    const value = [];
    for (let i = 0, l = options.length; i < l; i += 1) {
      if (options[i].selected) {
        value.push(options[i].value);
      }
    }
    setPersonName(value);
  }

  const ITEM_HEIGHT = 48;
  const MenuProps = {
    PaperProps: {
      style: {
        maxHeight: ITEM_HEIGHT * 4.5,
        width: 250,
        padding: 0,
      },
    },
  };

  const names = [
    'Oliver Hansen',
    'Van Henry',
    'April Tucker',
    'Ralph Hubbard',
    'Omar Alexander',
    'Carlos Abbott',
    'Miriam Wagner',
    'Bradley Wilkerson',
    'Virginia Andrews',
    'Kelly Snyder',
  ];

  return (
    <div>
      <FormControl variant="outlined" style={{ margin: '16px 0', width: '100%' }}>
        <InputLabel id="select-multiple-label" htmlFor="select-multiple">
          Name
        </InputLabel>
        <Select
          variant="outlined"
          multiple
          value={personName}
          onChange={handleChange}
          MenuProps={MenuProps}
          SelectDisplayProps={{
            id: 'select-multiple-display',
            'aria-label': `Name. ${personName}`,
          }}
        >
          {names.map((name) => {
            const selected = personName.indexOf(name) > -1;
            return (
              <MenuItem key={name} value={name} selected={selected} aria-selected={selected}>
                {name}
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
      <FormControl style={{ margin: '16px 0', width: '100%' }}>
        <InputLabel id="select-multiple-checkbox-label" htmlFor="select-multiple-checkbox">
          Tag
        </InputLabel>
        <Select
          multiple
          value={personName}
          onChange={handleChange}
          input={<Input id="select-multiple-checkbox" />}
          renderValue={(selected) => selected.join(', ')}
          MenuProps={MenuProps}
          SelectDisplayProps={{
            id: 'select-multiple-checkbox-display',
            'aria-label': `Tag. ${personName}`,
          }}
        >
          {names.map((name) => {
            const selected = personName.indexOf(name) > -1;
            return (
              <MenuItem key={name} value={name} selected={selected} aria-selected={selected}>
                <Checkbox checked={selected} color="default" />
                <ListItemText primary={name} />
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
      <FormControl style={{ margin: '16px 0', width: '100%' }}>
        <InputLabel id="select-multiple-chip-label" htmlFor="select-multiple-chip">
          Chip
        </InputLabel>
        <Select
          multiple
          value={personName}
          onChange={handleChange}
          input={<Input id="select-multiple-chip" />}
          renderValue={(selected) => (
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
              {selected.map((value) => (
                <Chip key={value} label={value} style={{ margin: '2px' }} />
              ))}
            </div>
          )}
          MenuProps={MenuProps}
          SelectDisplayProps={{
            id: 'select-multiple-chip-display',
            'aria-label': `Chip. ${personName}`,
          }}
        >
          {names.map((name) => {
            const selected = personName.indexOf(name) > -1;
            return (
              <MenuItem key={name} value={name} selected={selected} aria-selected={selected}>
                {name}
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
      <FormControl style={{ margin: '16px 0', width: '100%' }}>
        <InputLabel
          id="select-multiple-placeholder-label"
          shrink
          htmlFor="select-multiple-placeholder"
        >
          Placeholder
        </InputLabel>
        <Select
          multiple
          displayEmpty
          value={personName}
          onChange={handleChange}
          input={<Input id="select-multiple-placeholder" />}
          renderValue={(selected) => {
            if (selected.length === 0) {
              return <em>Placeholder</em>;
            }

            return selected.join(', ');
          }}
          MenuProps={MenuProps}
          SelectDisplayProps={{
            id: 'select-multiple-placeholder-display',
            'aria-label': `Placeholder. ${personName}`,
          }}
        >
          <MenuItem disabled value="">
            <em>Placeholder</em>
          </MenuItem>
          {names.map((name) => {
            const selected = personName.indexOf(name) > -1;
            return (
              <MenuItem key={name} value={name} selected={selected} aria-selected={selected}>
                {name}
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
      <FormControl style={{ margin: '16px 0', width: '100%' }}>
        <InputLabel shrink htmlFor="select-multiple-native">
          Native
        </InputLabel>
        <Select
          multiple
          native
          value={personName}
          onChange={handleChangeMultiple}
          inputProps={{
            id: 'select-multiple-native',
          }}
        >
          {names.map((name) => (
            <option key={name} value={name}>
              {name}
            </option>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}