SearchField

Examples

• Code

  jsx

  <s-search-field
    label="Search"
    labelAccessibilityVisibility="exclusive"
    placeholder="Search items"
   />

  html

  <s-search-field
    label="Search"
    labelAccessibilityVisibility="exclusive"
    placeholder="Search items"
  ></s-search-field>
  

• Basic usage

  Description

  Demonstrates a standard search input field for product discovery, with a clear label, name, and placeholder text to guide user interaction.

  jsx

  <s-search-field
    label="Search products"
    name="search"
    placeholder="Search products..."
   />

  html

  <s-search-field
    label="Search products"
    name="search"
    placeholder="Search products..."
  ></s-search-field>
  

• With error state

  Description

  Illustrates how the search field handles and displays an error state when no results are found or when there's a search-related issue.

  jsx

  <s-search-field
    label="Search orders"
    name="orderSearch"
    error="No results found"
    value="xyz123"
   />

  html

  <s-search-field
    label="Search orders"
    name="orderSearch"
    error="No results found"
    value="xyz123"
  ></s-search-field>
  

• Disabled state

  Description

  Demonstrates the appearance and behavior of a search field when it is disabled, preventing user interaction.

  jsx

  <s-search-field
    label="Search customers"
    name="customerSearch"
    disabled
    placeholder="Search is currently unavailable"
   />

  html

  <s-search-field
    label="Search customers"
    name="customerSearch"
    disabled
    placeholder="Search is currently unavailable"
  ></s-search-field>
  

• With character limits

  Description

  Showcases a search field with minimum and maximum character length constraints, providing guidance on input requirements.

  jsx

  <s-search-field
    label="Search collections"
    name="collectionSearch"
    minLength={3}
    maxLength={50}
    placeholder="Enter at least 3 characters"
   />

  html

  <s-search-field
    label="Search collections"
    name="collectionSearch"
    minLength="3"
    maxLength="50"
    placeholder="Enter at least 3 characters"
  ></s-search-field>