Hi I am using material ui in react and in normal size my inputs are smaller than select it should'nt be like that - https://prnt.sc/v97xtd
I am writing everything like it was in documentation , please help me
import React, { useState } from 'react';
import TextField from '#material-ui/core/TextField';
export default function InputKey() {
return (
<>
<TextField
required
id="sth"
label="Keywords"
defaultValue=""
variant="filled"
/>
</>
)
}
use
size="medium"
<TextField
required
id="sth"
label="Keywords"
defaultValue=""
variant="filled"
size="medium"// add
/>
see here
Related
I am new to MUI, so need a little help.
I want to use <Autocomplete freeSolo ...> that shows a dropdown arrow icon like it were a combo-box mode.
Looks like popupIcon and forcePopupIcon props are being ignored in freeSolo mode.
Thanks!
You can add your icon in renderInput prop of Autocomplete. Actually Autocomplete component is just a wrapper around Textfield component. In MUI V5, You can add any icon at the start or end of it by targeting Textfield inside it. For your case check the example below.
import Autocomplete from '#mui/material/Autocomplete'
import InputAdornment from '#mui/material/InputAdornment'
import TextField from '#mui/material/TextField'
import ArrowDropDownIcon from '#mui/icons-material/ArrowDropDown'
<Autocomplete
freeSolo
options={myOptions}
renderInput={(params) => (
<TextField
{...params}
label="My label"
InputProps={{ endAdornment: (
<InputAdornment position="end">
<ArrowDropDownIcon />
</InputAdornment>
),
}}
/>
)}
/>
This is my react js code with MUI TextField and I need to apply error and helperText property when error prop has a value. default error prop value is null.
import React from 'react'
import { TextField } from '#mui/material'
const InputField = (props) => {
const { name, label, value,error=null, onChange } = props;
return (
<TextField
variant='outlined'
label={label}
name={name}
value={value}
onChange={onChange}
{...{error && {error:true,helperText:error}}}
/>
)
}
export default InputField
The error is on this line. How I figer it on MUI 5.10.9 version
{...{error && {error:true,helperText:error}}}
use error and helperText prop directly without condition. also use space character inside helperText to avoid height issue when there is no error present. https://mui.com/material-ui/react-text-field/#helper-text
<TextField
variant='outlined'
label={label}
name={name}
value={value}
onChange={onChange}
error={!!error}
helperText={error || ' '}
/>
As you can see in the picture, when a user types something, a dropdown opens up with given options(predefined array). Upon selecting any of the options, it converts the selected option a tag.
I want to achieve the same but I don't want to provide a list. Whatever user types should convert to tag upon pressing enter
I guess you need this. It is a free solo AutoCompelete without any list options.
I made this example in codeSandBox for you.
import * as React from "react";
import Autocomplete from "#mui/material/Autocomplete";
import TextField from "#mui/material/TextField";
export default function LimitTags() {
return (
<Autocomplete
multiple
id="tags-filled"
options={[]}
defaultValue={[top100Films[13].title]}
freeSolo
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/>
)}
/>
);
}
If I enter One character and remove the focus, the Textfield breaks.
I guess mask problems
As shown in the picture
My code https://codesandbox.io/s/happy-blackwell-5sigw?file=/src/App.js:0-610
import { TextField } from "#material-ui/core";
import { IMaskMixin } from "react-imask";
import { useForm } from "react-hook-form";
const IMaskPhoneInput = IMaskMixin(({ ...props }) => {
return <TextField {...props} />;
});
export default function App() {
const {
register,
} = useForm();
return (
<div className="App">
<IMaskPhoneInput
autoFocus
fullWidth
mask={"+{7} (000) 000-00-00"}
color="primary"
label={"Телефон"}
placeholder={"+7 (950) 356-55-44"}
{...register("phone")}
/>
</div>
);
}
Have you tried including the shrink prop?
<TextField InputLabelProps={{ shrink: true }} />
This is per the documentation at https://mui.com/components/text-fields/ under limitations
Shrink
The input label "shrink" state isn't always correct. The input label is supposed to shrink as soon as the input is displaying something. In some circumstances, we can't determine the "shrink" state (number input, datetime input, Stripe input). You might notice an overlap.
To workaround the issue, you can force the "shrink" state of the label.
<TextField InputLabelProps={{ shrink: true }} /> or <InputLabel shrink>Count</InputLabel>
I'm currently working on several forms for an app and chose to use Material UI and React Hook Forms to build them. The basic functions are working, which means I can only proceed when all required inputs are filled and I'm getting the desired data.
Unfortunately I'm not able to use the form validation or display of error messages that comes with React Hook Form. It is still using the Material UI validation, even though I followed along to the documentation as close as possible.
Here's what I want to be able to do:
define the min and max length of an input
enter RegEx patterns for password inputs
show the neat looking error messages of React Hook Form
Some of the logic is working, some is not. Can you help me figure out why? Thank you in advance!
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { Link } from 'react-router-dom';
// COMPONENTS
import Button from '../01-atoms/inputs/Button';
import Textfield from '../01-atoms/inputs/Textfield';
// MATERIAL UI - CORE
import Fade from '#material-ui/core/Fade';
import Grid from '#material-ui/core/Grid';
import InputAdornment from '#material-ui/core/InputAdornment';
import Typography from '#material-ui/core/Typography';
import Paper from '#material-ui/core/Paper';
// MATERIAL UI - ICONS
import LockSharpIcon from '#material-ui/icons/LockSharp';
import PersonAddSharpIcon from '#material-ui/icons/PersonAddSharp';
export default function SignUp({ i18n, submitSignUpData }) {
const { register, handleSubmit, control, errors } = useForm();
return (
<Grid item xs={12} sm={6} md={3}>
<Fade in>
<Paper elevation={3}>
<Typography align='center' gutterBottom variant='h5'>
{i18n.sign_up.page_title}
</Typography>
<form onSubmit={handleSubmit(submitSignUpData)}>
<Grid container spacing={1}>
<Grid item xs={12}>
<Controller
// This is not working:
rules={register({
required: true,
minLength: 8,
})}
// But this is:
required
as={Textfield}
name='newPassword'
control={control}
defaultValue=''
fullWidth
label={i18n.login.password_placeholder}
variant='outlined'
type='password'
InputProps={{
endAdornment: (
<InputAdornment position='end'>
<LockSharpIcon />
</InputAdornment>
),
}}
/>
{errors.newPassword && 'Your input is required!'}
</Grid>
<Grid item xs={12}>
<Button
fullWidth
content={i18n.sign_up.get_started_button}
variant='contained'
color='secondary'
type='submit'
endIcon={<PersonAddSharpIcon />}
/>
</Grid>
</Grid>
</form>
<Link to='/log-in'>
<Typography>{i18n.login.login_button}</Typography>
</Link>
</Paper>
</Fade>
</Grid>
);
}
Instead of using controller why don't you use TextField of Material UI. I have something like this in my code.
<TextField
name="newPassword"
label="Password"
inputRef={register({ required: true, minLength: 8 })}
defaultValue=''
/>
{
errors.newPassword &&
<ErrorText>
{errors.newPassword.type === "required" ?
'Password is required.' :
`Min character limit for Password is 8.`}
</ErrorText>
}