46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
|
import Box from '@mui/material/Box';
|
||
|
|
import Input from '@mui/material/Input';
|
||
|
|
import InputLabel from '@mui/material/InputLabel';
|
||
|
|
import InputAdornment from '@mui/material/InputAdornment';
|
||
|
|
import FormControl from '@mui/material/FormControl';
|
||
|
|
import TextField from '@mui/material/TextField';
|
||
|
|
import AccountCircle from '@mui/icons-material/AccountCircle';
|
||
|
|
|
||
|
|
export default function InputWithIcon() {
|
||
|
|
return (
|
||
|
|
<Box sx={{ '& > :not(style)': { m: 1 } }}>
|
||
|
|
<FormControl variant="standard">
|
||
|
|
<InputLabel htmlFor="input-with-icon-adornment">
|
||
|
|
With a start adornment
|
||
|
|
</InputLabel>
|
||
|
|
<Input
|
||
|
|
id="input-with-icon-adornment"
|
||
|
|
startAdornment={
|
||
|
|
<InputAdornment position="start">
|
||
|
|
<AccountCircle />
|
||
|
|
</InputAdornment>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</FormControl>
|
||
|
|
<TextField
|
||
|
|
id="input-with-icon-textfield"
|
||
|
|
label="TextField"
|
||
|
|
slotProps={{
|
||
|
|
input: {
|
||
|
|
startAdornment: (
|
||
|
|
<InputAdornment position="start">
|
||
|
|
<AccountCircle />
|
||
|
|
</InputAdornment>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
variant="standard"
|
||
|
|
/>
|
||
|
|
<Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
|
||
|
|
<AccountCircle sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
|
||
|
|
<TextField id="input-with-sx" label="With sx" variant="standard" />
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|