Search Sidebar Form

The <search-sidebar-form> webcomponent displays a product search form inside a sidebar.

Attributes

Attribute name	Type	Default	Description
module-instance-id	string	-	A unique id of the module instance this webcomponent is used in

Example

sourceoutput

<search-sidebar-form module-instance-id="12">
    <div slot="form">
        <!-- Your search form elements go here -->
    </div>
</search-sidebar-form>

<search-sidebar-form module-instance-id="12">
    <h-sheet-opener name="sidebar-12" class="search__icon labeled-icon search__sidebar-opener">
        <span class="sr-only">Open search engine</span>
        <h-icon icon-name="icon-search" size="l"></h-icon>
        <div class="labeled-icon__signature" aria-hidden="true">Search</div>
    </h-sheet-opener>
    <h-sheet id="sidebar-12" class="search__sidebar">
        <h-sheet-header>
            <h2>Search</h2>
            <h-sheet-close class="btn btn_icon">
                <span class="sr-only">Close window</span>
                <h-icon icon-name="icon-x"></h-icon>
            </h-sheet-close>
        </h-sheet-header>
        <h-sheet-body>
            <!-- Your search form elements go here -->
        </h-sheet-body>
    </h-sheet>
</search-sidebar-form>

Accessibility

• The sidebar form uses h-sheet dialogs and ARIA attributes to ensure accessibility
• The opener and close buttons are keyboard accessible and screen reader friendly

Webcomponents reference

• h-storefront-search
• h-sheet
• h-icon

Styles reference

• Buttons
• Search
• Labeled Icons