I want to achieve the below UI for TextInput. It should have a fixed text at end along with a placeholder where the input can be given.
Note: the Fixed text shouldn't be editable.
Docs on input adornments: https://material-ui.com/components/text-fields/#input-adornments
import { TextField, InputAdornment } from "#material-ui/core";
<TextField
placeholder="00"
InputProps={{
endAdornment: <InputAdornment position="end">km</InputAdornment>,
}}
/>
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>
),
}}
/>
)}
/>
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.
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