import * as React from 'react';
import { FilledInput, FormControl, FormLabel } from '@mui/material';
// simple input with label
export default function Input() {
    return (<FormControl>
      <FormLabel>Email</FormLabel>
      <FilledInput placeholder='email@domain.com'/>
    </FormControl>);
}


import * as React from 'react';
import { FilledInput, FormControl, FormLabel } from '@mui/material';
// simple input with label
export default function Input() {
  return (
    <FormControl>
      <FormLabel>Email</FormLabel>
      <FilledInput placeholder='email@domain.com' />
    </FormControl>
  );
}


import * as React from 'react';
import { FilledInput, FormControl, FormLabel } from '@mui/material';
// simple input with start and end adornments
export default function Input() {
    return (<FormControl>
      <FormLabel>Price</FormLabel>
      <FilledInput startAdornment='$' endAdornment='USD' placeholder='0'/>
    </FormControl>);
}


import * as React from 'react';
import { FilledInput, FormControl, FormLabel } from '@mui/material';
// simple input with start and end adornments
export default function Input() {
  return (
    <FormControl>
      <FormLabel>Price</FormLabel>
      <FilledInput startAdornment='$' endAdornment='USD' placeholder='0' />
    </FormControl>
  );
}


import * as React from 'react';
import { FilledInput, FormControl, FormHelperText, FormLabel, } from '@mui/material';
// simple input with help text
export default function Input() {
    return (<FormControl>
      <FormLabel>What is your favorite dish?</FormLabel>
      <FilledInput />
      <FormHelperText>
        Make sure your answer is vague enough you will forget it in a few months{' '}
      </FormHelperText>
    </FormControl>);
}


import * as React from 'react';
import {
  FilledInput,
  FormControl,
  FormHelperText,
  FormLabel,
} from '@mui/material';
// simple input with help text
export default function Input() {
  return (
    <FormControl>
      <FormLabel>What is your favorite dish?</FormLabel>
      <FilledInput />
      <FormHelperText>
        Make sure your answer is vague enough you will forget it in a few months{' '}
      </FormHelperText>
    </FormControl>
  );
}


import * as React from 'react';
import { FilledInput, FormControl, FormLabel } from '@mui/material';
import { visuallyHidden } from '@mui/utils';
// simple input with hidden label
export default function Input() {
    return (<FormControl>
      <FormLabel sx={visuallyHidden}>Email</FormLabel>
      <FilledInput placeholder='email@domain.com'/>
    </FormControl>);
}


import * as React from 'react';
import { FilledInput, FormControl, FormLabel } from '@mui/material';
import { visuallyHidden } from '@mui/utils';
// simple input with hidden label
export default function Input() {
  return (
    <FormControl>
      <FormLabel sx={visuallyHidden}>Email</FormLabel>
      <FilledInput placeholder='email@domain.com' />
    </FormControl>
  );
}


import * as React from 'react';
import { FilledInput, FormControl, FormLabel } from '@mui/material';
// simple input in pill shape
export default function Input() {
    return (<FormControl>
      <FormLabel>Email</FormLabel>
      <FilledInput placeholder='email@domain.com' sx={{
            mx: -2,
            borderRadius: 999,
        }}/>
    </FormControl>);
}


import * as React from 'react';
import { FilledInput, FormControl, FormLabel } from '@mui/material';
// simple input in pill shape
export default function Input() {
  return (
    <FormControl>
      <FormLabel>Email</FormLabel>
      <FilledInput
        placeholder='email@domain.com'
        sx={{
          mx: -2,
          borderRadius: 999,
        }}
      />
    </FormControl>
  );
}


import * as React from 'react';
import { FilledInput, FormControl, FormLabel, IconButton } from '@mui/material';
import { TbEye, TbEyeOff } from 'react-icons/tb';
// password input with toggle visibility
export default function Input() {
    const [passwordVisibility, setPasswordVisibility] = React.useState(false);
    return (<FormControl>
      <FormLabel>Password</FormLabel>
      <FilledInput name='password' type={passwordVisibility ? 'password' : 'text'} endAdornment={<IconButton aria-label='toggle password visibility' onClick={() => setPasswordVisibility(!passwordVisibility)} edge='end'>
            {passwordVisibility ? <TbEye /> : <TbEyeOff />}
          </IconButton>} autoComplete='password'/>
    </FormControl>);
}


import * as React from 'react';
import { FilledInput, FormControl, FormLabel, IconButton } from '@mui/material';
import { TbEye, TbEyeOff } from 'react-icons/tb';
// password input with toggle visibility
export default function Input() {
  const [passwordVisibility, setPasswordVisibility] = React.useState(false);
  return (
    <FormControl>
      <FormLabel>Password</FormLabel>
      <FilledInput
        name='password'
        type={passwordVisibility ? 'password' : 'text'}
        endAdornment={
          <IconButton
            aria-label='toggle password visibility'
            onClick={() => setPasswordVisibility(!passwordVisibility)}
            edge='end'
          >
            {passwordVisibility ? <TbEye /> : <TbEyeOff />}
          </IconButton>
        }
        autoComplete='password'
      />
    </FormControl>
  );
}


Inputs

Input with label

Input with adornments

Input with help text

Input with hidden label

Input in pill shape

Password input