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,
  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"
// 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>
  )
}


Inputs

Input with label

Input with adornments

Input with help text

Input with hidden label

Input in pill shape

Password input