/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/text-fields/InputWithIcon.tsx
49 строк
2 KB
Jan Potoms
[docs] Use `React.useId()` for demo IDs (#48300)
19 апр 2026, 13:10
Не верифицирован
19 апр 2026, 13:10
107f22c
Код
Авторство
О чём код?
import * as React from 'react'; 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() { const adornmentId = React.useId(); const textFieldId = React.useId(); const sxId = React.useId(); return ( <Box sx={{ '& > :not(style)': { m: 1 } }}> <FormControl variant="standard"> <InputLabel htmlFor={`${adornmentId}-input`}> With a start adornment </InputLabel> <Input id={`${adornmentId}-input`} startAdornment={ <InputAdornment position="start"> <AccountCircle /> </InputAdornment> } /> </FormControl> <TextField id={`${textFieldId}-input`} 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={`${sxId}-input`} label="With sx" variant="standard" /> </Box> </Box> ); }