@gov.au/form

@gov.au/form

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

Contents

• Install
• Dependency graph
• Tests
• Release History
• License

Install

yarn add @gov.au/form

npm install @gov.au/form

⬆ back to top

Dependency graph

form
└─ core

⬆ back to top

Tests

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

⬆ back to top

Release History

• 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

React

Usage:

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

<AUlabel text="Email" />

<AUhintText text="We will only use this email to respond to your query." />

<AUerrorText text="Enter an email address in the correct format, like [e-mail]" />

<AUformGroup>
    // labels, hint text, and form controls here
</AUformGroup>

<AUfieldset>
    <AUlegend>
    // labels/hint text here
    </AUlegend>

    // form controls here
    
</AUfieldset>

All props:

<AUlabel 
    text="Email"                 {/* The text of the label */}
    dark={ true }                {/* The dark variation of the component */}
    inline={ true }              {/* Label inline*/}
/>

<AUhintText
    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 */}
/>

<AUerrorText
    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*/}
/>

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

<AUfieldset 
    dark = { true }             {/* The dark variation of the component */}
/>