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}
/>
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.
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"
/>
)}
/>
);
}
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.
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
In default semantic-ui we can do this option: https://github.com/Semantic-Org/Semantic-UI/commit/b4ae26d24f75886c3d5f6fc4f00e176f09705a13
But, how to do it in semantic-ui-react? Google nothing say about it, please, I need help.
What I'm trying to achieve:
I'm using redux-form. In my form present semantic component <Form.Select multiple ....> and after success submit - call to redux-form method reset. All is fine, form is clear... but not dropdown/select field. Any ideas?
I solved the problem as follows:
Semantic-ui-react props value set to the current value of the field.
<Form.Select
name={input.name}
options={options}
label={label}
placeholder={placeholder}
search
multiple
selectOnBlur={selectOnBlur}
onFocus={::this.handleFocus}
onBlur={::this.handleBlur}
onChange={::this.handleChange}
defaultValue={defaultValue || []}
value={input.value}
loading={loading} />