Search Box

Basic

This is a basic example of the SearchBox component.

export const ProductSearchComponent = () => {
  return (
    <SearchBox
      onSubmitEditing={(e) =>
        console.log("Searching for:", e.nativeEvent.text)
      }
      hasIcon={false}
      placeholder="Search for electronics, clothing, books..."
    />
  );
};

With Icon

This story demonstrates the SearchBox component with an icon.

export const ContactSearchComponent = () => {
  return (
    <SearchBox placeholder="Search contacts by name or email..." />
  );
};

Disabled

This story showcases the SearchBox component with the 'isDisabled' prop set to true.

export const ArchivedSearchComponent = () => {
  return (
    <SearchBox
      isDisabled={true}
      placeholder="Search archived items..."
    />
  );
};

With Custom Placeholder

This story illustrates the SearchBox component with a custom placeholder text ('Country or city...').

export const RecipeFinderComponent = () => {
  return (
    <SearchBox placeholder="Search by ingredient, cuisine, or dish name..." />
  );
};

With Default Value

This story demonstrates the SearchBox component with a default value ('London').

export const RecentSearchComponent = () => {
  return (
    <SearchBox
      placeholder="Search your history..."
      defaultValue="React Native tutorials"
    />
  );
};

With Button

This story showcases the SearchBox component with a custom button.

Find Jobs

export const JobSearchComponent = () => {
  return (
    <SearchBox placeholder="Job title, company, or keywords...">
      <SearchBox.Button
        onPress={() => {
          console.log("Finding jobs...");
        }}
      >
        Find Jobs
      </SearchBox.Button>
    </SearchBox>
  );
};

With Accessibility Label

This story illustrates the SearchBox component with an accessibility label ('Search for a country or city').

export const AccessibleSearchComponent = () => {
  return (
    <SearchBox
      placeholder="Search help articles..."
      accessibilityLabel="Search for help articles and documentation"
    />
  );
};

Override Color Mode

You can override the color mode of the SearchBox component by passing the colorMode prop.

Search

export const GlobalSearchComponent = () => {
  return (
    <SearchBox placeholder="Search files, folders, and settings...">
      <SearchBox.Button>Search</SearchBox.Button>
    </SearchBox>
  );
};

Override Accent Color

You can override the accent color of the SearchBox component by passing the accentColor prop.

Discover

export const MusicSearchComponent = () => {
  return (
    <SearchBox
      accentColor={"violet"}
      placeholder="Search songs, artists, or albums..."
    >
      <SearchBox.Button>Discover</SearchBox.Button>
    </SearchBox>
  );
};

Override Color Mode and Accent Color

You can override the color mode and accent color of the SearchBox component by passing the colorMode and accentColor props at the same time.

Explore

export const TravelSearchComponent = () => {
  return (
    <SearchBox accentColor={"cyan"} placeholder="Where would you like to go?">
      <SearchBox.Button>Explore</SearchBox.Button>
    </SearchBox>
  );
};

No Border Radius

Example of the SearchBox component without border radius.

export const LocationFinderComponent = () => {
  return (
    <SearchBox
      borderRadius={"$0"}
      onSubmitEditing={(e) =>
        console.log("Finding location:", e.nativeEvent.text)
      }
      hasIcon={true}
      placeholder="Enter address or city name..."
    />
  );
};

No Border

Example of the SearchBox component without border.

export const MinimalSearchComponent = () => {
  return (
    <SearchBox
      borderColor={"transparent"}
      onSubmitEditing={(e) => console.log("Searching:", e.nativeEvent.text)}
      hasIcon={true}
      placeholder="What are you looking for?"
    />
  );
};