CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
A.K.M. Adib
A.K.M. Adib

Reputation: 567

How to have two input adornments in Material UI next to each other in a text field

I went over the Text Field demo where they show input adornments at the start and end but I want two input adornments at the end and I tried to do have endAdornment: {InputAdornment InputAdornment} but then I got an error saying adjacent JSX elements must have a parent element. Then I used a div tag but then I got an error saying that my brackets were misplaced. This is how I want the input adornments to be

enter image description here

Upvotes: 1

Views: 4277

Answers (1)

Mani S
Mani S

Reputation: 2561

Is this what you are expecting to look like? https://codesandbox.io/s/material-demo-forked-trbit?file=/demo.tsx:1640-2360

enter image description here

    <FormControl fullWidth className={classes.margin} variant="outlined">
      <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
      <OutlinedInput
        id="outlined-adornment-amount"
        value={values.amount}
        onChange={handleChange("amount")}
        startAdornment={<InputAdornment position="start">$</InputAdornment>}
        endAdornment={
          <>
            <InputAdornment position="start">$</InputAdornment>
            <InputAdornment position="start">$</InputAdornment>
            <InputAdornment position="start">$</InputAdornment>
          </>
        }
        labelWidth={60}
      />
    </FormControl>

Upvotes: 8

Related Questions