Search

A composable search surface with a toggle, input, and results.

#Import

import {
  Search,
  SearchContent,
  SearchInput,
  SearchInputToggle,
  SearchItem,
  SearchToggle,
} from 'bmates-ui';

#Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

<Search>
  <SearchToggle>Search</SearchToggle>
  <SearchContent>
    <SearchInput placeholder="Search projects" />
    <SearchItem>Design system</SearchItem>
  </SearchContent>
</Search>

#Preview

<Search>
  <SearchToggle>Search</SearchToggle>
  <SearchContent>
    <SearchInput placeholder="Search projects" />
    <SearchItem>Design system</SearchItem>
  </SearchContent>
</Search>

#Prop previews

The examples below isolate the props that change visual output or interaction.

#Alignment

<Search align="end">...</Search>

#Trigger spacing

<Search space={16}>...</Search>

#Disabled item

<SearchItem disabled>Delete</SearchItem>

#Component API

#Usage notes

• Every component in the table is exported from bmates-ui.
• Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
• For application-owned state, use a controlled value and its change handler instead of only a default* prop.