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


View changes
npm i
  • Raj Ghuman avatar picture
  • Andrew Arch avatar picture
  • Adam Zerella avatar picture
  • Sarah Pulis avatar picture


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.


  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 '';
import { AUtextInput } from '';

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


<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 "";
import { AUtextInput } from "";

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


<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</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 '';
import { AUtextInput } from '';

<AUlabel text="Email" htmlFor="email" />
<AUerrorText type="email" text="Enter an email address in the correct format, like" 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.


    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 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"/>
    status:  <AUformGroup status="invalid" />
import { AUlabel, AUformGroup } from '';
import { AUtextInput } from '';

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

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


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.


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

    <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 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 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>
import { AUfieldset, AUlegend } from '';
import { AUcheckbox } from '';

        <h1 class="au-display-xxl">Which devices do you use?</h1>
        <span className="au-hint-text">You may select more than one</span>
    <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/>