Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – MUI material-ui – how to group a TextField and a Select?

In my app, the user needs to enter a quantity that can be in Bytes, KiB, GiB, or MiB.

I’m using 2 Reacts MUI components :

  • a TextField to enter the quantity
  • a Select to select the right quantity unit (Bytes, KiB, GiB, or MiB)

That’s what I get: what I get

But as you can see there is a radius on each component. It’s not nice looking.

I would like to get that :
what I woud like

I tried with form groups, but doesn’t work. Any ideas ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks discovrer for your solution.

    In the meantime I found another solution

    <ButtonGroup
 fullWidth>
    <TextField
        fullWidth
        value={1}
        InputProps={{
            sx: {
                height: "50px",
                mr: 0,
                borderTopRightRadius: 0,
                borderBottomRightRadius: 0,
            }
        }}
    />
    <Select
        fullWidth
        value={1}
        sx={{
            ml: 0,
            height: "50px",
            borderTopLeftRadius: 0,
            borderBottomLeftRadius: 0,
        }}
    >
        <MenuItem value={1}>Bytes</MenuItem>
        <MenuItem value={1024}>kiB</MenuItem>
        <MenuItem value={1024 * 1024}>MiB</MenuItem>
        <MenuItem value={1024 * 1024 * 1024}>GiB</MenuItem>
        <MenuItem value={1024 * 1024 * 1024 * 1024}>TiB</MenuItem>
    </Select>
</ButtonGroup>

  2. 0

    You should use InputAdornment with Select as child. Refer this.

    I have created an implementation here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search