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
React Usage
import AUsearchbox from '@gold.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 '@gold.au/searchbox';pancake import
import AUsearchbox from './searchbox';