Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
157 lines (88 sloc) 3.79 KB

@gov.au/form

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

Contents


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.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

⬆ 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 name@example.com" />

<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 */}
/>
You can’t perform that action at this time.