React Mantine Search Bar Example

In this tutorial, we will create search bar in react mantine core. We will see search bar, search bar with search icon using react mantine.

Install & Setup Vite + React + Typescript + Mantine UI

How to Use Mantine in Next.JS 13

React Mantine Search Bar Example

1. react mantine search bar using usestate hook.

import { useState } from "react";
import { Input, Button, Container, Flex } from "@mantine/core";

const MantineSearchBar = () => {
  const [searchQuery, setSearchQuery] = useState("");

  const handleSearchInputChange = (event) => {
    setSearchQuery(event.target.value);
  };

  const handleSearchClick = () => {
    console.log(`Searching for "${searchQuery}"...`);
  };

  return (
    <>
      <Container  mt={120}>
        <Flex
          direction={{ base: "column", sm: "row" }}
          gap="sm"
          align="center"
        >
          <Input
            placeholder="Search"
            value={searchQuery}
            onChange={handleSearchInputChange}
            radius="xl"
          />
          <Button onClick={handleSearchClick}  size="xs" radius="xl">
            Search
          </Button>
        </Flex>
      </Container>
    </>
  );
};

export default MantineSearchBar;

react mantine search bar

2. react mantine ui search with icons. Before using icon you need to install @tabler/icons.

Run below command to install @tabler/icons.

npm install @tabler/icons-react 

Use @tabler/icons in react mantine ui search bar with search icon.

import { Input, Button, Container, Flex, Space } from "@mantine/core";
import { IconSearch } from "@tabler/icons-react";

const MantineSearchBar = () => {
  return (
    <>
      <Container mt={120}>
        <Flex direction={{ base: "column", sm: "row" }} gap="sm" align="center">
          <Input
            icon={<IconSearch size={18} />}
            placeholder="Search"
            radius="sm"
          />
        </Flex>
        <Space h="md" />
        <Flex direction={{ base: "column", sm: "row" }} gap="sm" align="center">
          <Input
            icon={<IconSearch size={18} />}
            placeholder="Search"
            radius="xl"
          />
        </Flex>
        <Space h="md" />
        <Flex direction={{ base: "column", sm: "row" }} gap="sm" align="center">
          <Input
            icon={<IconSearch size={18} />}
            placeholder="Search"
            radius="xl"
          />
          <Button size="xs" radius="xl">
            Search
          </Button>
        </Flex>
        <Space h="md" />
      </Container>
    </>
  );
};

export default MantineSearchBar;

react mantine search bar with search icon