I'm using MUI for the first time on a project. Trying to get InputAdornment to show a magnifying glass svg icon inside a TextInput. I'm following the example here: https://mui.com/components/text-fields/
Regardless of the content of the adornment, I cannot get anything to show up in the UI. In the inspector, the input adornment attribute looks like this endadornment="[object Object]"
My code is like this:
<TextField
defaultValue={''}
inputProps={{
placeholder: 'Search',
endAdornment: <InputAdornment position="end">any</InputAdornment>
}}
onChange={handleChange}
/>
Answered by cris_b in a comment. Turns out there is an InputProps prop and an inputProps prop on TextField.
The difference between the two according to the MUI text-field API documentation:
inputProps: object
Attributes applied to the input element.
InputProps: object
Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
Related
I'm playing with material ui and build a project and I needed make a TextField with mask
with react-imask:
https://mui.com/en/material-ui/react-text-field/#integration-with-3rd-party-input-libraries
But I tried with OutlinedInput but the label crashes:
<FormControl variant="standard">
<InputLabel htmlFor="formatted-text-mask-input">react-imask</InputLabel>
<OutlinedInput
value={values.textmask}
onChange={handleChange}
name="textmask"
id="formatted-text-mask-input"
inputComponent={TextMaskCustom as any}
/>
</FormControl>
Empty
Filled
Codesandbox box
https://codesandbox.io/s/problem-with-3rd-party-input-libraries-cygxss?file=/demo.tsx
Codesandbox result link:
https://cygxss.csb.app/
Is there any reason you don't just use a TextField with variant set to "outlined"?
The MUI example is just showing different methods of using their components and the FormControl composition is done in greater complexity within TextField.
Solution
<TextField
label="react-imask"
id="formatted-text-mask-input"
name="textmask"
value={values.textmask}
onChange={handleChange}
InputProps={{
inputComponent: TextMaskCustom as any
}}
/>
Brief Look at Form Control
It appears as though you have an OutlinedInput but are telling the FormControl it is "standard", fixing this puts the label in the right spot, but it does not properly break the border of the fieldset as intended.
If you need to manually control the composition of the individual parts (FormControl, InputLabel, OutlinedInput, etc) you can see how MUI compose TextField in GitHub.
Everyone
I have been trying to implement an icon inside the TextField component at the start of it using material-ui.
I believe that the reader knows about the Material UI library. I stuck to using Version 4 for this project.
I did find a few things for achieving this and I did try it. But it's working on some conditional basis. That is if I try to style the notchedOutline of the TextField like giving it a borderRadius or something the icon is not getting visible. Though after inspecting the element I do find it there. I did try to change the color and everything but nothing is working.
Here is what I need :
Image Describing my need
and here is what I am getting:
The coded output image
And here is the code that I have tried.
import {....,TextField,InputAdornment } from "#material-ui/core";
.........
<TextField
variant="outlined"
InputProps={{
startAdornment: (<InputAdornment position="start"><img src={someImage} /></InputAdornment>)
}}
classes={{
root classes.textField,
}}
fullWidth
/>
........
Can someone please help me in solving the same.
Thank you!!
There's something wrong with the image you use as a child inside <InputAdornment/> component. Make sure you import it correctly. However, according to docs, <InputAdornment/> expects as child - The content of the component, normally an IconButton or string.
Therefore, you should install #material-ui/icons package and use their icons instead on an img :
import MailIcon from '#material-ui/icons/Mail';
...
InputProps={{
startAdornment: <InputAdornment position="start"><MailIcon/></InputAdornment>,
}}
Demo
By default if nothing was picked label will be placed as placeholder(like in screenshot bellow).
<KeyboardDatePicker InputAdornmentProps={{
position: 'start'
}}
/>
Is there a way to shrink the label and keep placeholder empty? I tried adding InputAdornmentProps={{position: 'start'}} and it helped(in a screenshot bellow) except I do not need the icon to be at start, I need it to keep as it is, on right.
Is there a way to achieve it? I am using KeyboardDatePicker from https://material-ui-pickers.dev/api/KeyboardDatePicker
Any prop not recognized by the pickers and their sub-components are passed down to material-ui TextField component.
So what you need to do is simply add the required props from the TextField component to shrink the label. The result would look like this:
<KeyboardDatePicker InputLabelProps={{ shrink: true }} />
I have a material-ui Textfield which is amount field
I want to format it so that upon typing, the Textfield has thousands separator and decimal. And bonus, if the input is on the right side (just like in calculators)
e.g.
user types 1000000
textfield should show 1,000,000.00
See code below:
<TextField
variant="outlined"
margin="normal"
required
fullWidth
type="text"
id="debitAmount"
label="Amount"
value={debitAmount}
onChange={(e) => setDebitAmount(e.target.value)}
InputProps={{
classes: { input: classes.textfield1 },
}}
/>
I'm trying to use a library called react-number-format but I'm having a hard time to apply it onto my textfield since the documentation lacks samples
I also tried to use toLocaleString("en") which was effective however the textfield can only show up to 4 numbers and I'm not sure why
Ciao, here a working example. I have used exactly the same example reported in Material-ui docs (simplyfied) using react-number-format, and to show a fixed number of decimal I used toFixed(2).
react-number-format can be integrated with MaterialUI TextField like this:
<NumberFormat
customInput={TextField}
onValueChange={(values) => setNumberFormatState(values.value)}
value={numberFormatState}
// you can define additional custom props that are all forwarded to the customInput e. g.
variant="outlined"
/>
Be aware that I use onValueChange from react-number-format. Here you get the values object which has both the unformatted value and the formatted formattedValue. Most likely you want the bare value in state.
If anyone is coming across this, IMO the #alexanderdavide solution is the simplest and can also be used with the react-currency-format library as well:
import { TextField } from '#mui/material';
<CurrencyFormat
customInput={TextField}
thousandSeparator
prefix="$"
decimalScale={0}
placeholder="Amount"
label="Amount"
onChange={handleNewAmount}
/>
I would like to compose a custom RadioGroup element as seen in this example. Ideally I'd like to have an Avatar as a sibling to the radio element of the control pro. Im stumbling on this JS warning or at least understanding the root of why inputRef cant spread to this element.
React does not recognize the inputRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase inputref instead. If you accidentally passed it from a parent component, remove it from the DOM element.
As you can see in the example the custom control prop breaks the RadioGroup functionality making it multi-select. Is this custom Radio component possible?
`<Field name="bestFramework" component={RadioGroup}>
<FormControlLabel
control={
<span>
<Radio value="react" />
<Avatar
alt="react"
src="https://image.flaticon.com/icons/svg/53/53058.svg"
/>
</span>
}
label="React"
value="react"
/>
<Radio value="angular" label="Angular" />
<Radio value="ember" label="Ember" />
</Field>`