I require a Material-UI search icon to be positioned on the right side of the input box

https://i.stack.imgur.com/Tppgr.png

Is there a way to ensure the search icon appears on the right side of the input box in material-ui when using React? Are there specific classes that need to be added for this?

See below for the relevant code snippet:

 import InputBase from '@material-ui/core/InputBase';
import SearchIcon from '@material-ui/icons/Search';
  <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
            />
          </div>
reactjssearchmaterial-designmaterial-ui

Answer №1

To incorporate the endAdornment feature in the InputBase, follow these steps:

<InputBase
  placeholder="Search…"
  inputProps={{ 'aria-label': 'search' }}
  endAdornment={<SearchIcon/>}
/>

Answer №2

Instead of using endAdornment, simply switch to startAdornment and it will function as intended.

Below is an example showcasing the code:

import Button from "@mui/material/Button";
import { Container, InputAdornment, TextField } from "@mui/material";
import { useState } from "react";
import SearchIcon from "@mui/icons-material/Search";

const MyFilesIndex = () => {
  const [searchTerm, setSearchTerm] = useState("");

  const handleChange = (event: any) => {
    setSearchTerm(event.target.value);
  };

return (
  <div>
      <Container maxWidth="md">
        <TextField
          id="search"
          type="search"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
          sx={{ width: 350 }}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            )
          }}
        />
      </Container>
    </div>
);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The display of the selected input is not appearing when the map function is utilized

I am attempting to use Material UI Select, but it is not functioning as expected. When I use the map function, the default value is not displayed as I would like it to be. However, it does work properly when using the traditional method. *** The Method th ...

javascriptreactjstypescriptmaterial-ui

Constructor-generated element doesn't reflect changes upon component re-rendering

Why doesn't the <select> I create in the constructor update correctly when I select a different flavor? The other select and text update, but not this one. class ConstructorComponent extends React.Component { constructor() { super(); ...

javascriptreactjsconstructorecmascript-6

What is the best way to implement the Snackbar functionality within a class-based component?

My snackbar codes are not working as expected when I click the "confirm" button. I want the snackbar to appear after clicking the button. Most examples I've seen use functional components, so how can I get the Snackbar to work properly in a class comp ...

javascriptreactjsmaterial-ui

What could be causing the issue with my prop not being passed correctly in React?

Currently, I am utilizing the ProductCard component to send the product prop to a page named "ProductPage". The product is expected to be an object containing id, categoryId, name, price, and img key/value pairs. To achieve this, I am employing a combinati ...

reactjsreact-router-dom

Grouping multiple buttons together in a ButtonGroup

Currently, while working with React 16.9.0 and Material-UI 4.4.2, there is a particular issue that I am facing. The requirement is to render a ButtonGroup containing Button elements which are generated from custom components. These custom components retur ...

reactjsmaterial-ui

Guide to setting up parameterized routes in GatsbyJS

I am looking to implement a route in my Gatsby-generated website that uses a slug as a parameter. Specifically, I have a collection of projects located at the route /projects/<slug>. Typically, when using React Router, I would define a route like t ...

javascriptreactjsgatsby

Tailwind - Error: the function is undefined

Just beginning my journey with React Native and facing this error. Screenshot of IOS App emulator Screenshot of Terminal import React from "react"; import { StyleSheet, Text, View } from 'react-native'; import tw from "tailwind-rn& ...

reactjsreact-nativetailwind-css

Error encountered in React: Unable to read property 'preventDefault' of an undefined value

Within my React application, I have an onClick event that is triggered: onClick={this.selectedComponent} The function being called by the onClick event is as follows: selectedComponent = (e) => { e.preventDefault(); this.setState({ ...

reactjs

Once I deployed my Nextjs website on Vercel, I encountered an issue when attempting to log in with Google as it kept redirecting me to localhost:

I rely on supabase for my backend operations. While attempting to log in using Google, I need to ensure that it does not redirect me to localhost. ...

reactjsnext.js

Is there a way to retrieve the client's IP address from the server side within a Next.js application?

How can I determine the user's time zone and location in order to generate a server-side page tailored to their specific location and time zone? I am struggling to retrieve the user's IP address from the request or the localhost IP address (127.0 ...

javascriptnode.jsreactjsexpressnext.js

What makes the select box transition in React Material UI stand out?

Why does the select box move up instead of being on the same level as the input field? If you'd like to see my code, click here. For more information, visit the following links: Material-UI Selects Demo https://i.stack.imgur.com/7WtGr.png https://i ...

reactjsreact-reduxmaterial-ui

What steps can I take to ensure that AstroJS components do not conceal SVG elements when the SVG is incorporated into another file with client:load?

Currently, I am developing a weather application using Astro.js in conjunction with React. One of the features includes an SVG component that serves as the project logo and is implemented in the initial page loader. Upon the page loading, the SVG functions ...

reactjstypescriptastrojs

Utilizing the React TypeScript useContext hook with useReducer for state management

I'm struggling to identify the type error present in this code snippet import React from 'react'; interface IMenu { items: { title: string, active: boolean, label: string }[] } type Action = | { type: 'SET_ACTIVE&a ...

reactjstypescripttypesreact-hooks

implementing a scroll-up animation using Material UI

Check out this link https://react.dev/community#stack-overflow where you'll find https://i.stack.imgur.com/DSXnM.png As you scroll back up, you will come across https://i.stack.imgur.com/LoOj6.png Is there a ready-made Material UI component that ca ...

reactjsmaterial-ui

Navigate to a different section on the same page using NextJs

I am currently working with NextJs and I have a question. How can I create a link in the header section that will smoothly scroll the user to the TestimonialsSection on the same page? <Link href={"#TestimonialsSection"}> & ...

reactjsnext.js

Designing tab navigation in React Native

Is there a specific way to customize only the ORANGE tab's style? I am curious to learn how to address this particular scenario. I have attempted various methods to modify the style of the ORANGE tab. My application utilizes navigation 5. <Tab.Navi ...

javascriptreactjsreact-nativereact-navigation

Converting a string to regular text in JavaScript (specifically in ReactJS)

When I fetch data from an API, sometimes there are special characters involved. For example, the object returned may look like this: { question : "In which year did the British television series &quot;The Bill&quot; end?" } If I save t ...

javascripthtmlreactjsstring

Incorporating a Favicon into your NextJs App routing system

Encountering an issue with the new Next.js App Router. The head.js files have been removed, thus according to the documentation I need to implement metadata in layout.ts. My favicon file is named favicon.png. How should I specify it within the following c ...

javascriptreactjsnext.jsnext.js13

Looking for assistance with Redux and React Hooks - anyone?

I have created an interactive image gallery where users can click between page one and page two. When a user clicks on an image, a modal will appear displaying the selected image along with its title and description. There is also a Submit Button that allo ...

reactjsreduxreact-reduxmaterial-ui

Is there a way to stop Material UI from dulling the color of my AppBar when using dark mode in my theme?

When I use mode: "dark" in my Material UI theme, it causes the color of my AppBar to become desaturated. Switching it to mode: "light" resolves this issue. This is how my theme is configured: const theme = createTheme({ palette: { ...

reactjstypescriptmaterial-uireact-typescript