@gold.au/form
============

> The form component contains layout, labelling and inline validations for form fields

Contents

* Install
* Dependency graph
* Tests
* Release History
* License

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

Install

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

`shell
npm install @gold.au/form
`


⬆ back to top


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

Dependency graph

`shell
/form
└─ /core
`


⬆ back to top

Release History

* v0.1.6 - Update core package dependency to use the latest version
* v0.1.5 - Update version for the dependency: @gold.au/core
* v0.1.4 - Add margin between text area and form labels, hint text and error messages.
* v0.1.3 - Remove --save-dev flag from readme instructions.
* v0.1.2 - Remove hint text colours as they are now in core.
* v0.1.1 - Update selector to add margin-top for all input elements that are preceded by a label element
* v0.1.0 - 💥 Initial version


⬆ back to top


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

License

Copyright (c) Commonwealth of Australia.
Licensed under MIT.


⬆ back to top

};

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

Usage


* React


⬆ back to top


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

$3

Usage:

`jsx
import { AUlabel, AUhintText, AUerrorText, AUformGroup, AUfieldset, AUlegend } from '@gold.au/form';


// labels, hint text, and form controls here




// labels/hint text here


// form controls here


`

All props:

`jsx
text="Email" {/ The text of the label /}
dark={ true } {/ The dark variation of the component /}
inline={ true } {/ Label inline/}
/>

text="We will only use this email to respond to your query." {/ The hint text /}
dark = { true } {/ The dark variation of the component /}
alt={ false } {/ The alt variation of the component /}
/>

text="Enter an email in the valid format." {/ The error text /}
dark={ true } {/ The dark variation of the component /}
inline={ true } {/ Display the error text inline/}
/>

status="invalid" {/ Adds invalid state to form group /}
dark = { true } {/ The dark variation of the component /}
/>

dark = { true } {/ The dark variation of the component /}
/>
``