Skip to main content

Search By Chips Block

SearchByChip is a chip-based quick-search block built on MUI with a title, subtitle, and one or more clickable chip sections.

Installation​

npm install @nodeblocks/frontend-search-by-chip-block

What You Need​

ItemWhy it matters
searchByChipTitleMain heading at the top of the block
subtitleSupporting text below the title
chipSectionsDefines each chip group, its label, chips, and onClickChip handler
Handle chip clicks in your app

Each section supplies its own onClickChip callback. Use it to update search state, navigate, or trigger an API request.

Code Examples​

Live Editor
function Example() {
  const searchChips = [
    {value: 'electronics', label: 'Electronics'},
    {value: 'clothing', label: 'Clothing'},
    {value: 'books', label: 'Books'},
    {value: 'home-garden', label: 'Home & Garden'},
    {value: 'sports', label: 'Sports'},
  ];

  const [selectedValue, setSelectedValue] = React.useState('');

  const handleChipClick = value => {
    setSelectedValue(value);
  };

  const chipSections = [
    {
      sectionTitle: 'Categories',
      chips: searchChips,
      onClickChip: handleChipClick,
    },
  ];

  return (
    <>
      {selectedValue ? (
        <Typography variant="body2" sx={{mb: 2, textAlign: 'center'}}>
          Selected: <strong>{selectedValue}</strong>
        </Typography>
      ) : null}
      <SearchByChip
        searchByChipTitle="Quick Search"
        subtitle="Find what you're looking for"
        chipSections={chipSections}
      />
    </>
  );
}
Result
Loading...

Important Props​

Core Props​

PropTypeRequiredDefaultDescription
searchByChipTitleReactNodeYes—Main title rendered by SearchByChip.Title
subtitleReactNodeYes—Subtitle rendered by SearchByChip.Subtitle
chipSectionsChipSection[]Yes—Chip groups; each section has its own onClickChip handler

ChipSection shape:

FieldTypeRequiredDescription
sectionTitleReactNodeYesHeading for the chip group
chipsChipOption[]YesChips shown in the section
onClickChip(value: string) => voidYesCalled when a chip in this section is clicked

ChipOption shape:

FieldTypeRequiredDescription
valuestringYesIdentifier passed to onClickChip
labelReactNodeYesChip button label
iconReactNodeNoOptional startIcon on the chip button (defaults to SearchByChip.ChipIcon)

Layout and Composition Props​

PropTypeRequiredDefaultDescription
childrenBlocksOverride | ReactNodeNoundefinedOverride default blocks or render compound children
classNamestringNoundefinedClass name on the root stack
sxSxPropsNoundefinedMUI system styles for the root stack
spacingStackProps['spacing']No{ xs: 0.5, sm: 1 }Vertical spacing on the root stack

SearchByChip inherits StackProps (except children). Default defaultBlockOrder: subtitle, title, sectionTitle, chipIcon, chipItem, chipSection, chipSections (root renders subtitle, title, chipSections only).

Sub-component props​

Sub-components share context with the root. searchByChipTitle, subtitle, and chipSections apply by default; pass the same keys on a sub-component to override locally.

Sub-componentMain PropsInheritsBuilt on
SearchByChip.TitlesearchByChipTitle, children, variant (h1), component (h1), className, sxTypographyPropsTypography
SearchByChip.Subtitlesubtitle, children, variant (h6), component (h6), className, sxTypographyPropsTypography
SearchByChip.ChipSectionschipSections, children, className, sxStackPropsStack
SearchByChip.ChipSectionsectionTitle, chips, onClickChip, children, classNameStackPropsStack + Divider + Box
SearchByChip.SectionTitlesectionTitle (required), children, variant (h5), component (h5), className, sxTypographyPropsTypography
SearchByChip.ChipItemonClickChip (required), value (required), label (required), startIcon (default ChipIcon), className, sxButton props except childrenButton (variant="outlined", size="small")
SearchByChip.ChipIcon——Check icon

Default UI Blocks​

BlockBuilt onNotes
SearchByChip (root)StackCentered container that provides title, subtitle, and chip section context
SearchByChip.TitleTypographyvariant="h1", responsive font size
SearchByChip.SubtitleTypographyPrimary color, responsive typography
SearchByChip.ChipSectionsStackMaps chipSections to ChipSection blocks

Default root render order: subtitle → title → chipSections.

chipSection, sectionTitle, chipItem, and chipIcon are composed inside ChipSections and are not rendered at the root block level.

Extra field primitives​

PrimitiveBuilt onNotes
SearchByChip.SectionTitleTypographyOne chip-section heading; default variant="h5" and component="h5"
SearchByChip.ChipSectionStack + Divider + BoxRenders one section title and its chip buttons
SearchByChip.ChipItemButtonOne outlined chip button; calls onClickChip(value)
SearchByChip.ChipIconCheck iconDefault start icon for ChipItem

TypeScript​

import * as React from 'react';
import {SearchByChip} from '@nodeblocks/frontend-search-by-chip-block';
import type {ReactNode} from 'react';

type ChipOption = {
  value: string;
  label: string;
  icon?: ReactNode;
};

type ChipSection = {
  sectionTitle: ReactNode;
  chips: ChipOption[];
  onClickChip: (value: string) => void;
};

const categoryChips: ChipOption[] = [
  {value: 'electronics', label: 'Electronics'},
  {value: 'clothing', label: 'Clothing'},
  {value: 'books', label: 'Books'},
];

export function QuickSearchByChips() {
  const [query, setQuery] = React.useState('');

  const chipSections: ChipSection[] = [
    {
      sectionTitle: 'Categories',
      chips: categoryChips,
      onClickChip: value => setQuery(value),
    },
  ];

  return (
    <SearchByChip
      searchByChipTitle="Quick Search"
      subtitle={query ? `Showing results for "${query}"` : "Find what you're looking for"}
      chipSections={chipSections}
    />
  );
}