Search Field B

Component that represents a search form.

Preview

Search text: -

Code

import { useState } from "react"; import InputContainerA from "../../input/input-container-a/input-container-a"; import styles from "./search-field-b.module.css"; type Props = { className?: string; searchButtonText?: React.ReactNode; searchButtonIcon?: React.ReactNode; beforeElement?: React.ReactNode; placeholder?: string; rounded?: "none" | "small" | "medium" | "large" | "full"; // Put additional variants here, then define them in the CSS variant?: "default" | "style-a"; onSearch?: (searchText: string) => void; }; export default function SearchFieldB({ className, searchButtonText, searchButtonIcon, beforeElement, placeholder = "Search item ...", rounded = "medium", variant, onSearch, }: Props) { // Here is a simple implementation of the email value handling const [searchText, setTextSearch] = useState(""); return ( <div className={[ styles["wrapper"], styles[`r-${rounded}`], styles[`variant-${variant}`], className, ].join(" ")} > <form className={styles["search-form"]} onSubmit={(e) => { // sample behavior when form is submitted onSearch && onSearch(searchText); setTextSearch(""); e.preventDefault(); }} > <InputContainerA className={styles["input-search"]} shadow="none" height="large" border="thin" rounded={rounded} beforeElement={beforeElement} > <input type={"text"} value={searchText} placeholder={placeholder} onChange={(e) => setTextSearch(e.target.value)} /> </InputContainerA> <button type="submit" className={[ styles["search-btn"], !searchButtonText && styles["icon-only"], ].join(" ")} > {!searchButtonText && !searchButtonIcon && ( <span className={styles["btn-text"]}>Search</span> )} {searchButtonText && ( <span className={styles["btn-text"]}>{searchButtonText}</span> )} {searchButtonIcon && ( <span className={styles["btn-icon"]}>{searchButtonIcon}</span> )} </button> </form> </div> ); }

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.
  • beforeElement (string or ReactNode): Specifies the component placed before the search input.
  • placeholder (string or ReactNode): Specifies the placeholder text.
  • rounded ("none" | "small" | "medium" | "large" | "full"): Specifies the border radius of the frame.
  • 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.
  • onSearch (Array of ActionType): Fires when the search form is submitted.
Sample CSS customization
.variant-style-a .search-btn { --search-button-height: 3rem; background-color: #383838; color: #ffffff; padding-left: 1.5rem; padding-right: 1.5rem; } .variant-style-a .search-btn.icon-only { padding: 0; }