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
  • Christopher Lee avatar picture
  • Patrick De Young avatar picture
  • Trevor Brennan avatar picture
  • Raj Ghuman avatar picture
  • Alex Page avatar picture
  • Gordon Grace avatar picture
  • Alexandra Baranov avatar picture

React Usage

import AUsearchbox from '@gov.au/searchbox';

<AUsearchbox
    aria-label="sitewide"
    label="Search this website" 
    btnText="Search"
    responsive={true}
    id="search-site"
    btnProps={{ onClick: () => console.log('hello'), className: 'blah', type: 'button' }}
/>

Props

AUsearchbox

Prop name Type Description
label string Label text
btnText string text on the button
btnProps object Additional props to be passed into the AUbutton
id string Id of the text input
inputProps object Additional props to be passed into the AUtextInput
dark boolean The dark variation of the component
responsive boolean Responsive variation of the search box
icon boolean The icon only version of the component
wrapper string The wrapping container element. Default is form

All other props are spread into the component.

Exports

name type description
AUsearchbox none default The searchbox component

node_modules import

import AUsearchbox from '@gov.au/searchbox';

pancake import

import AUsearchbox from './searchbox';