UI Component Code Gallery for React - by Mirado Andria

Search Field Lite A

A search for component.

Preview

Code

import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import clsx from "clsx";
import styles from "./search-field-lite-a.module.css";
import { useState } from "react";

type Props = {
  className?: string;
  placeholder?: string;
};

export default function SearchFieldLiteA({
  className,
  placeholder = "Search ...",
}: Props) {
  const [searchText, setTextSearch] = useState("");
  return (
    <form
      className={clsx(styles["search-field-wrapper"], className)}
      onSubmit={(e) => {
        // ...sample behavior when form is submitted
        e.preventDefault();
      }}
    >
      <input
        type={"text"}
        name={"search"}
        className={styles["search-input"]}
        placeholder={placeholder}
        value={searchText}
        onChange={(e) => setTextSearch(e.target.value)}
      />
      <button type="submit" title="Search" className={styles["search-btn"]}>
        <MagnifyingGlassIcon className={styles["search-btn-icon"]} />
      </button>
    </form>
  );
}

Design

Figma design file:

Documentation

Dependencies

This component needs the input container InputContainerA component.

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • searchButtonText (string or ReactNode): Specifies the search button text.
  • searchButtonIcon (string or ReactNode): Specifies the search button icon.
  • placeholder (string or ReactNode): Specifies the placeholder text.
  • variant ("default" | "style-a" or a customized value): Specifies the color or theme variant of the component. Check out the "Sample CSS customization" below for an example of how to use it.
Sample CSS customization
.variant-style-a .search-btn {
    background-color: #383838;
    color: #ffffff;
    padding-left: 1rem;
    padding-right: 1rem;
}
.variant-style-a .search-btn.icon-only {
    padding: 0;
}