Skip to main content

Search By Chips Block

The SearchByChip Component is a fully customizable and accessible search by chips interface built with React and TypeScript. It provides a complete chip-based search experience with modern design patterns, clickable chip sections, and flexible customization options for filtering and searching functionality.

πŸš€ Installation​

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

πŸ“– Usage​

import {SearchByChip} from '@nodeblocks/frontend-search-by-chip-block';
Live Editor
function SimpleSearchByChip() {
  const chips = [
    {value: 'web', label: 'Web Development'},
    {value: 'mobile', label: 'Mobile Apps'},
    {value: 'cloud', label: 'Cloud Services'},
    {value: 'analytics', label: 'Data Analytics'},
    {value: 'ai', label: 'AI & Machine Learning'},
  ];

  const handleChipClick = (value) => {
    console.log('Chip clicked:', value);
  };

  return (
    <SearchByChip
      searchByChipTitle="Find Services"
      sectionTitle="Popular Categories"
      subtitle="Browse by category to find what you need"
      onClickChip={handleChipClick}
      chips={chips}
    >
      <SearchByChip.Title />
      <SearchByChip.Subtitle />
      <SearchByChip.ChipSection />
    </SearchByChip>
  );
}
Result
Loading...

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
searchByChipTitleReactNodeRequiredMain title for the search by chip section
sectionTitleReactNodeRequiredTitle for the chip section
subtitleReactNodeRequiredSubtitle text displayed below the main title
onClickChip(value: string) => voidRequiredCallback function triggered when a chip is clicked
chipsChip[]RequiredArray of chip objects to display
classNamestringundefinedAdditional CSS class name for styling the container
sxSxProps<Theme>See belowMUI System prop for custom styling
childrenBlocksOverrideundefinedFunction to override default blocks or add custom chip components

Default sx:

{
  p: 2,
  gap: 0.5,
  bgcolor: 'background.paper',
  textAlign: 'center',
  containerType: 'inline-size'
}

Note: The main component inherits all MUI Stack props.

Sub-Components​

The SearchByChip component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

SearchByChip.Title​

Renders the main title for the search section.

PropTypeDefaultDescription
childrenReactNodesearchByChipTitle from contextCustom content to override default title rendering
searchByChipTitleReactNodeFrom contextTitle text (overrides context)
variantstring'h4'Typography variant
componentElementType'h1'The component used for the root node
sxSxProps<Theme>undefinedMUI System prop for custom styling

Note: This component inherits all MUI Typography props.

SearchByChip.Subtitle​

Renders the subtitle below the main title.

PropTypeDefaultDescription
childrenReactNodesubtitle from contextCustom content to override default subtitle rendering
subtitleReactNodeFrom contextSubtitle text (overrides context)
variantstring'h6'Typography variant
componentElementType'h6'The component used for the root node
sxSxProps<Theme>{ color: 'primary.main' }MUI System prop for custom styling

Note: This component inherits all MUI Typography props.

SearchByChip.SectionTitle​

Renders the title for the chip section.

PropTypeDefaultDescription
childrenReactNodesectionTitle from contextCustom content to override default section title rendering
sectionTitleReactNodeFrom contextSection title text (overrides context)
variantstring'body1'Typography variant
componentElementType'h6'The component used for the root node
sxSxProps<Theme>See belowMUI System prop for custom styling

Default sx:

{
  px: 2,
  py: 1.875,
  fontWeight: theme.typography.h6.fontWeight
}

Note: This component inherits all MUI Typography props.

SearchByChip.ChipItem​

Renders an individual clickable chip button.

PropTypeDefaultDescription
onClickChip(value: string) => voidRequiredCallback function for chip click events
valuestringRequiredUnique value identifier for the chip
labelReactNodeRequiredDisplay text for the chip
startIconReactNode<SearchByChip.ChipIcon />Icon displayed at the start of the chip
variant'text' | 'outlined' | 'contained''outlined'Button variant
size'small' | 'medium' | 'large''small'Button size
sxSxProps<Theme>See belowMUI System prop for custom styling

Default sx:

{
  '&&': {
    fontWeight: theme.typography.fontWeightLight,
    py: '7px',
    px: 2,
    borderColor: 'grey.50',
    bgcolor: 'background.paper'
  },
  '&:hover': {
    boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)'
  }
}

Note: This component inherits all MUI Button props (except children).

SearchByChip.ChipIcon​

Renders the default checkmark icon for chips.

PropTypeDefaultDescription
sxSxProps<Theme>{ width: 16, height: 16, color: 'primary.main' }MUI System prop for custom styling

Note: This component uses MUI SvgIcon and renders a checkmark icon. It accepts no props but uses default styling.

SearchByChip.ChipSection​

Renders the container for chips including section title and chip items.

PropTypeDefaultDescription
childrenReactNodeDefault chip renderingCustom content to override default chip section rendering
chipsChip[]From contextArray of chip objects to display (overrides context)
sectionTitleReactNodeFrom contextTitle for the chip section (overrides context)
onClickChip(value: string) => voidFrom contextCallback for chip clicks (overrides context)
sxSxProps<Theme>undefinedMUI System prop for custom styling

Note: This component inherits all MUI Stack props. Internally renders SearchByChip.SectionTitle and a flex container with SearchByChip.ChipItem elements.

🎨 Configuration examples​

Custom Title Styling​

<SearchByChip.Title 
  variant="h3"
  sx={{ color: 'primary.main', fontWeight: 700 }} 
/>

Custom Chip Item Styling​

<SearchByChip.ChipItem
  value="custom"
  label="Custom Chip"
  onClickChip={(value) => console.log(value)}
  variant="contained"
  sx={{ borderRadius: 4, px: 3 }}
/>

Custom Chip Section​

<SearchByChip.ChipSection
  sx={{
    bgcolor: 'grey.50',
    borderRadius: 2,
    p: 2,
  }}
/>

Custom Styling​

function CustomStyledSearchByChip() {
  const chips = [
    {value: 'frontend', label: 'Frontend'},
    {value: 'backend', label: 'Backend'},
    {value: 'devops', label: 'DevOps'},
    {value: 'design', label: 'Design'},
  ];

  return (
    <SearchByChip
      searchByChipTitle="Search Categories"
      sectionTitle="Select a Category"
      subtitle="Choose from popular categories below"
      onClickChip={value => console.log('Clicked:', value)}
      chips={chips}
      sx={{
        bgcolor: 'grey.50',
        p: 4,
        borderRadius: 3,
      }}
    >
      <SearchByChip.Title
        sx={{
          color: 'primary.dark',
          fontWeight: 700,
          fontSize: 28,
        }}
      />
      <SearchByChip.Subtitle
        sx={{
          color: 'text.secondary',
          mb: 2,
        }}
      />
      <SearchByChip.ChipSection
        sx={{
          '& .MuiButton-root': {
            bgcolor: 'primary.main',
            color: 'white',
            borderRadius: 2,
            '&:hover': {
              bgcolor: 'primary.dark',
            },
          },
        }}
      />
    </SearchByChip>
  );
}

Chips with Icons​

function SearchByChipWithIcons() {
  const chips = [
    {value: 'web', label: 'Web', icon: <span>🌐</span>},
    {value: 'mobile', label: 'Mobile', icon: <span>πŸ“±</span>},
    {value: 'desktop', label: 'Desktop', icon: <span>πŸ–₯️</span>},
    {value: 'cloud', label: 'Cloud', icon: <span>☁️</span>},
  ];

  return (
    <SearchByChip
      searchByChipTitle="Platform Selection"
      sectionTitle="Choose Your Platform"
      subtitle="Select the platform you want to develop for"
      onClickChip={value => console.log('Platform:', value)}
      chips={chips}
      sx={{
        p: 4,
        bgcolor: '#f8fafc',
        borderRadius: 2,
      }}
    >
      <SearchByChip.Title />
      <SearchByChip.Subtitle />
      <SearchByChip.ChipSection />
    </SearchByChip>
  );
}

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

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

interface ChipData {
  value: string;
  label: string;
  icon?: React.ReactNode;
}

function TypedSearchByChip() {
  const searchChips: ChipData[] = [
    {value: 'react', label: 'React'},
    {value: 'typescript', label: 'TypeScript'},
    {value: 'nodejs', label: 'Node.js'},
    {value: 'graphql', label: 'GraphQL'},
    {value: 'aws', label: 'AWS'},
  ];

  const handleChipClick = (value: string): void => {
    console.log('Selected technology:', value);
    // Navigate or filter logic
  };

  return (
    <SearchByChip
      searchByChipTitle="Search Technologies"
      sectionTitle="Popular Technologies"
      subtitle="Click on a chip to filter by technology"
      onClickChip={handleChipClick}
      chips={searchChips}
      spacing={3}
      sx={{
        maxWidth: 800,
        mx: 'auto',
        p: 4,
      }}
    >
      <SearchByChip.Title />
      <SearchByChip.Subtitle />
      <SearchByChip.SectionTitle />
      <SearchByChip.ChipSection />
    </SearchByChip>
  );
}

πŸ“ Notes​

  • The main component uses MUI Stack with default padding, gap, and centered text alignment.
  • All typography components (Title, Subtitle, SectionTitle) inherit MUI Typography props.
  • ChipItem uses MUI Button with variant="outlined" and size="small" by default.
  • Each chip can have a custom icon property that overrides the default startIcon.
  • The default ChipIcon is a checkmark SVG rendered via MUI SvgIcon.
  • The ChipSection uses container queries (containerType: 'inline-size') for responsive chip layout.
  • Context values (searchByChipTitle, subtitle, sectionTitle, chips, onClickChip) are shared via React Context and can be overridden at the sub-component level.

Built with ❀️ using React, TypeScript, and MUI.