dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Search box

v0.2.2

An input that allows users to enter a keyword to filter content on the website.

Released

History
View changes
Install
npm i @gov.au/searchbox
Tags
Requires
Contributors
  • Gordon Grace avatar picture
  • Trevor Brennan avatar picture
  • Alexandra Baranov avatar picture
  • Alex Page avatar picture
  • Christopher Lee avatar picture
  • Patrick De Young avatar picture
  • Raj Ghuman avatar picture

Default

Use the search box component to help users find content or pages through keywords. This can be particularly useful for a web service with a large amount of pages.

Example

<!--
  Light:  <form class="au-search">
  Dark:   <form class="au-search au-search--dark">
          <input class="au-text-input au-text-input--dark">...
-->

  <form role="search" aria-label="sitewide" class="au-search">
      <label for="standard" class="au-search__label">Search this website</label>
      <input type="search" id="standard" name="standard" class="au-text-input"/>
      <div class="au-search__btn">
          <button class="au-btn" type="submit"><span class="au-search__submit-btn-text">Search</span></button>
      </div>
  </form>
/*
  Light:  <AUsearchbox >
  Dark:   <AUsearchbox dark />
*/

import AUsearchbox from './searchbox.js';

<AUsearchbox aria-label="sitewide" label="Search this website" btnText="Search" id="site-search"/>

Responsive

The responsive variation replaces the button text with a search icon on smaller devices. This allows more space for text to be written in the text input.

Example

<!--
  Respsonive:  <form class="au-search au-search--responsive">
  Icon only:   <form class="au-search au-search--icon">
-->

  <form role="search" aria-label="sitewide" class="au-search au-search--responsive">
      <label for="standard" class="au-search__label">Search this website</label>
      <input type="search" id="standard" name="standard" class="au-text-input"/>
      <div class="au-search__btn">
          <button class="au-btn" type="submit"><span class="au-search__submit-btn-text">Search</span></button>
      </div>
  </form>
/*
  Responsive:  <AUsearchbox responsive>
  Icon only:   <AUsearchbox icon />
*/

import AUsearchbox from './searchbox.js';
  
<AUsearchbox
  respsonsive 
  aria-label="sitewide" 
  label="Search this website" 
  btnText="Search" 
  id="site-search"
/>