react mantine search bar example

React Mantine Search Bar Example

updated 09/03/23 By frontendshape

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

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

react mantine search bar with search icon