005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
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>
|
|
);
|
|
}
|