@gold.au/form

    1.0.0 • Public • Published

    @gold.au/form

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

    Contents


    Install

    yarn add @gold.au/form
    npm install @gold.au/form

    back to top


    Dependency graph

    /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

    back to top


    React

    Usage:

    import { AUlabel, AUhintText, AUerrorText, AUformGroup, AUfieldset, AUlegend } from '@gold.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 */}
    />

    Install

    npm i @gold.au/form

    DownloadsWeekly Downloads

    12

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    49.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • designsystemau
    • elisechant
    • dominikwilkowski