Skip to content
This repository has been archived by the owner on Aug 26, 2021. It is now read-only.

Latest commit

 

History

History
161 lines (92 loc) · 4.05 KB

File metadata and controls

161 lines (92 loc) · 4.05 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.6 - Update core package dependency to use the latest version
  • v0.1.5 - Update version for the dependency: @gov.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

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