Search Popup Form

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

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-popup-form module-instance-id="12">
    <div slot="form">
        <!-- Your search form elements go here -->
    </div>
</search-popup-form>

<search-popup-form module-instance-id="12">
    <h-modal-opener name="modal-12" class="search__icon labeled-icon search__popup-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-modal-opener>
    <h-modal id="modal-12" class="search__popup">
        <h-modal-header>
            <h2>Search</h2>
            <h-modal-close class="btn btn_icon" aria-label="Close window">
                <h-icon icon-name="icon-x"></h-icon>
            </h-modal-close>
        </h-modal-header>
        <h-modal-body>
            <!-- Your search form elements go here -->
        </h-modal-body>
    </h-modal>
</search-popup-form>

Accessibility

• The popup form uses h-modal 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-modal
• h-icon

Styles reference

• Buttons
• Search
• Labeled Icons