Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    User Guide

    Quick Search Component

    The search bar, known as Quick Search, is a navigation system that allows the user to quickly access content by launching a search on a keyword or phrase. It offers users a way to explore a website or application using keywords, whether user-generated or recommended by the component.

    Overview

    Component name: Quick Search

    Authors who can use: any author can edit placeholder text

    Templates/page types that can use component: required on some templates:

    • Quick Search is baked into all pages as part of global navigation in the Header (uneditable; no placeholder text)
    • Quick Search is baked into the following templates: Search Result Listing (editable placeholder text)
    • Quick Search may be added to the Hero- main usecase is the Homepage

    Required or optional: required on some templates

    Authoring Fields

    Adding the Quick Search component to the page

    Pages that will use Quick Search already have the component baked into the template. If a page does not have Quick Search, it should not be added.

    Editing the Quick Search component

    1. With the edit wrench, open the component.

    Quick Search component featuring edit wrench

    1. Properties tab

    a. Placeholder Text field: Add text that should appear as a placeholder until the user starts typing (ex. “Search for license types”). Placeholder text is optional.

    2. Styles tab

    a. Size dropdown: Select the size of the Quick Search component. Options are None, Small, and Large. The default is None, which is interchangeable with Small.

    3. Accessibility tab

    a. Label field: Add an accessibility label, to be read for screen reader users. Example: “Search Programs and Services.”

    Accessibility

    Add an accessibility label to the Quick Search component.

    Other tips

    1. Use the Emulator widget to test Quick Search size on different devices.

    2. Placeholder text should be short suggestions of what the user can search for.

    3. When selecting size, Small will be more commonly used. Large size should only be used when there is a lot of space to work with on the page.

    4. Type-ahead suggestion capabilities (ex. when user types “d”, there are suggestions for “driver’s license” and “driver’s license renewal”) will be developed in future phases.