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

Label

Use labels to associate text with a form control. This is done using the for and id attributes on the label and the form control, respectively.

Example

<!--
  Inline:  <label class="au-label au-label--inline">
-->

<label class="au-label" for="email">Email</label>
<input type="email" class="au-text-input" id="email" name="email">

/*
  Inline:  <AULabel inline />
*/

import { AUlabel } from '@gold.au/form';
import { AUtextInput } from '@gold.au/text-inputs';

<AUlabel htmlFor="email" text="Email" />
<AUtextInput type="email" id="email" />

Hint text

Hint text can be used to provide more context that will help the user successfully complete the form field.

Example

<label class="au-label" for="email">Email</label>
<span class="au-hint-text" id="email-hint">We will only use this to respond to your query</span>
<input type="email" class="au-text-input" id="email" name="email" aria-describedby="email-hint"/>

import { AUlabel, AUhintText } from "@gold.au/form";
import { AUtextInput } from "@gold.au/text-inputs";

<AUlabel text="Email" htmlFor="email" />
<AUhintText text="We will only use this to respond to your query" id="hint-text"/>
<AUtextInput type="email" id="email" aria-describedby="hint-text" status="invalid" />

Error messages

Error messages are used to notify the user when a form field has not passed validation. Use clear messages to explain what went wrong and how to fix it.

Example

<label class="au-label" for="email">Email</label>
<span class="au-error-text" id="email-error-text">Enter an email address in the correct format, like name@example.com</span>
<input type="email" class="au-text-input au-text-input--invalid" id="email" aria-invalid="true" aria-describedby="email-error-text" />

import { AUlabel, AUerrorText } from '@gold.au/form';
import { AUtextInput } from '@gold.au/text-inputs';

<AUlabel text="Email" htmlFor="email" />
<AUerrorText type="email" text="Enter an email address in the correct format, like name@example.com" id="email -error" />
<AUtextInput id="email" aria-describedby="email-error" status="invalid" />

Form groups

Used to group form controls and provide structure and consistent spacing within a form.

Example

<!--
    invalid:  <div class="au-label au-form-group--invalid">
-->

<div class="au-form-group">
    <label class="au-label" for="name">First Name</label>
    <input type="text" class="au-text-input au-text-input--block" id="name"/>
</div>
<div class="au-form-group au-form-group--invalid">
    <label class="au-label" for="surname">Surname</label>
    <input type="surname" class="au-text-input au-text-input--block au-text-input--invalid" id="surname" aria-invalid="true"/>
</div>

/*
    status:  <AUformGroup status="invalid" />
*/
import { AUlabel, AUformGroup } from '@gold.au/form';
import { AUtextInput } from '@gold.au/text-inputs';

<AUformGroup>
    <AUlabel text="First Name" htmlFor="firstname" />
    <AUtextInput type="email" id="firstname"/>
</AUformGroup>

<AUformGroup status="invalid">
    <AUlabel text="Surname" htmlFor="surname" />
    <AUtextInput type="surname" id="surname"/>
</AUformGroup>

Fieldset

Fieldset is used to associate a number of related form fields as well as labels within a form. The legend provides an association and caption for the form fields in the fieldset.

Example

<fieldset class="au-fieldset">
    <legend class="au-fieldset__legend">
        <h1 class="au-display-xxl">Which devices do you use?</h1>
        <span class="au-hint-text">You may select more than one</span>
    </legend>

    <div class="au-control-input">
        <input class="au-control-input__input" type="checkbox" name="checkbox-ex" id="cb-laptop" checked>
        <label class="au-control-input__text" for="cb-laptop">Laptop</label>
    </div>

    <div class="au-control-input">
        <input class="au-control-input__input" type="checkbox" name="checkbox-ex" id="cb-phone" checked>
        <label class="au-control-input__text" for="cb-phone">Phone</label>
    </div>
    
    <div class="au-control-input">
        <input class="au-control-input__input" type="checkbox" name="checkbox-ex" id="cb-tablet">
        <label class="au-control-input__text" for="cb-tablet">Tablet</label>
    </div>
</fieldset>

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="Laptop" name="checkbox-ex" id="cb-laptop" block checked/>
    <AUcheckbox label="Phone" name="checkbox-ex" id="cb-phone" block checked/>
    <AUcheckbox label="Tablet" name="checkbox-ex" id="cb-tablet" block/>
</AUfieldset>

Related components

Feedback