Search box
v1.0.0An input that allows users to enter a keyword to filter content on the website.
Released
- History
- View changes
- Install
- npm i @gold.au/searchbox
- Tags
- Requires
- Contributors
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"
/>