npm package: @gold.au/searchbox
Description: @gold.au/searchbox ============
Author: Design System AU
Latest version: 1.0.0

@gold.au/searchbox
============

> 


## Contents

* [Install](#install)
* [Dependency graph](#dependency-graph)
* [Tests](#tests)
* [Release History](#release-history)
* [License](#license)


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Install


```shell
yarn add @gold.au/searchbox
```

```shell
npm install @gold.au/searchbox
```


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Dependency graph

```shell
/searchbox
├─ /core
├─ /text-inputs
│  └─ /core
└─ /buttons
   └─ /core
```


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Tests

The visual test: https://auds.service.gov.au/packages/searchbox/tests/site/


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Release History

* v0.2.3 - Display search icon for XS breakpoint when responsive (Fix based on the new grid breakpoints)
* v0.2.2 - Increase size for icon
* v0.2.1 - Add styling for secondary buttons
* v0.2.0 - Update padding on button, fix JSdoc
* v0.1.0 - 💥 Initial version


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------


## License

Copyright (c) Commonwealth of Australia.
Licensed under [MIT](https://raw.githubusercontent.com/govau/design-system-components/packages/core/master/LICENSE).


**[⬆ back to top](#contents)**

# };

----------------------------------------------------------------------------------------------------------------------------------------------------------------


## Usage


* [React](#react)


**[⬆ back to top](#contents)**


----------------------------------------------------------------------------------------------------------------------------------------------------------------

### React

Usage:

```jsx
import AUsearchbox from '@gold.au/searchbox';

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

All props:


<AUsearchbox 
	label="Search"                        {/* Text of the label */}
	btnText="Search"                      {/* Text on the button */}
	dark={true}                           {/* Dark variation */}
	responsive={true}                     {/* Responsive variation, text turns to icon on smaller devices*/}
	icon={false}                          {/* Icon only, hides text on button */}
	id="def-search"                       {/* ID of the text input, required */}
	className=""                          {/* Additional class, optional */}
	wrapper="form"                        {/* Wrapper component. Can be a div or form. */}
	btnProps= {{type: 'button'}}          {/* Additonal props to be spread into the button */}
	inputProps= {{type: 'text'}}          {/* Additonal props to be spread into the text input */}
/>
```