Search Box

Use the search box to let users search for content on your website or within a specific section.

Default Search Box

<div class="search-box">
  <input type="search" class="search-box-input" placeholder="Search">
  <button type="submit" class="search-box-button">Search</button>
</div>

Large Search Box

Use the large variant for prominent search features, such as on the homepage.

<div class="search-box search-box-lg">
  <input type="search" class="search-box-input" placeholder="Search gov.kaharagia.org">
  <button type="submit" class="search-box-button">Search</button>
</div>

With Label

<div class="form-group">
  <label class="form-label" for="search-1">Search for services</label>
  <div class="search-box">
    <input type="search" id="search-1" class="search-box-input">
    <button type="submit" class="search-box-button">Search</button>
  </div>
</div>

With Hint Text

<label class="form-label" for="search-2">Search documents</label>
<span class="form-hint">You can search by title, reference number, or keyword.</span>
<div class="search-box">...</div>

When to Use

Use a search box when:

• The site has lots of content to navigate
• Users commonly search for specific information
• As a fallback when navigation is complex

Don't use a search box when:

• The site has very little content
• Navigation is simple and clear
• Search results would be unhelpful

Usage Guidelines

Do

• Place search prominently in the header or content area
• Use helpful placeholder text
• Provide useful search results
• Allow empty searches to show all results or suggestions

Don't

• Don't rely on search as the only navigation
• Don't submit on every keystroke (use debouncing)
• Don't hide the search button

Accessibility

• Use type="search" for the input
• Provide a visible or visually-hidden label
• The search button should be keyboard accessible
• Announce search results to screen readers

CSS Classes

/* Container */
.search-box { }
.search-box-lg { }

/* Input */
.search-box-input { }

/* Button */
.search-box-button { }