Form

v1.0.0

A collection of styles for labels, hint text, inline error messages, fieldsets and spacing for form controls.

Released

History
View changes
Install
npm i @gold.au/form
Tags
Requires
Contributors
  • Raj Ghuman avatar picture
  • Andrew Arch avatar picture
  • Adam Zerella avatar picture
  • Sarah Pulis avatar picture

React Usage

import { AUfieldset, AUlegend } from '@gold.au/form';
import { AUcheckbox } from '@gold.au/control-input';

<AUfieldset>
    <AUlegend>
        <h1 class="au-display-xxl">Which devices do you use?</h1>
        <span className="au-hint-text">You may select more than one</span>
    </AUlegend>
    <AUcheckbox label="Phone" name="checkbox-ex" id="cb-phone" block checked/>
    <AUcheckbox label="Tablet" name="checkbox-ex" id="cb-tablet" block/>
    <AUcheckbox label="Laptop" name="checkbox-ex" id="cb-laptop" block checked/>
</AUfieldset>

Props

AUlegend

All props are spread into the component.

AUformGroup

Prop name Type Description
status string Mark this field as either valid or invalid

All other props are spread into the component

AUlabel

Prop name Type Description
text string The label content
dark boolean A dark variation of the component
inline boolean The inline option to make the list inline

All other props are spread into the component

AUhintText

Prop name Type Description
text string The hint text content
dark boolean A dark variation of the component
alt boolean An alt variation of the component

All other props are spread into the component

AUerrorText

Prop name Type Description
text string The error text content
dark boolean A dark variation of the component

All other props are spread into the component

Exports

Name Type Description
AUfieldset named The form fieldset component
AUlegend named The fieldset legend component
AUformGroup named The form formgroup component
AUlabel named The form label component
AUhintText named The form hint text component
AUerrorText named The form error text component

node_modules import

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

pancake import

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

Related components

Feedback