Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add element inside TextField component - Material UI

I want to create input element which will have select property but also to be able to write custom text in it. I'm using React and Material-UI.

Is it possible to add element inside TextField component (inside div just below input) in Material-UI.

Currently: Usluga grupni Pos ....

With added element:

<div class="MuiFormControl-root-142 ...>
  <label class="MuiFormLabel-root-151 ...>Usluga</label>
  <div class="MuiInput-root-156 ...>
    <input aria-invalid="false" ... list="services" value="">
    <datalist id="services">
      <li tabindex="-1" ...>grupni<span class="MuiTouchRipple-root-82"></span> 
      </li>
      <li tabindex="-1" ...>Pos<span class="MuiTouchRipple-root-82"></span>
      </li>
    ....
  </div>
</div>

React currently:

<TextField
  id="service"
  label="Usluga"
  className={classes.textField}
  margin="normal"
  onChange={handleChange}
  inputProps={{
   list: "services"
  }}
/>
<datalist id="services">
 {
   services.map(option => (
     <MenuItem key={option.id} value={option.service}>
      { option.service }
     </MenuItem>
    ))
 }
</datalist>

If that's not possible, what is the other way to make this?

like image 993
MarinK Avatar asked Aug 05 '18 12:08

MarinK


People also ask

How do I change the value of TextField material UI?

To set a value for TextField from Material UI with React, we set the value prop of the TextField to a state value. And we set the onChange prop to a function that sets the state to a the value that's inputted. We call the useState hook to create the value state and the setValue function to set the value state's value.

What is SX in material UI?

The sx prop is a shortcut for defining custom styles that has access to the theme. The sx prop lets you work with a superset of CSS that packages all of the style functions exposed in @mui/system . You can specify any valid CSS using this prop, as well as many theme-aware properties that are unique to MUI System.

What is InputProps MUI?

InputProps. object. Props applied to the Input element. It will be a FilledInput , OutlinedInput or Input component depending on the variant prop value.


1 Answers

You can try this method, it worked for me :)

<TextField
  required
  id='password'
  label='Password'
  onChange={handleOnChange}
  type={toggle.passwordVisibility ? 'text' : 'password'}
  InputProps={{
    endAdornment: (
      <InputAdornment position='end'>
        <IconButton
          aria-label='toggle password visibility'
          onClick={handlePasswordVisibility}
          onMouseDown={handleMouseDownPassword}>
          {toggle.passwordVisibility && <Visibility />}
          {!toggle.passwordVisibility && <VisibilityOff />}
        </IconButton>
      </InputAdornment>
    ),
  }}
/>
like image 153
White Rabbit Avatar answered Oct 16 '22 00:10

White Rabbit