Forms & buttons

Collection: Components

Buttons

Collection: Components

Example

Link as a button

<p>
  <button>Button</button>
  <a href="" role="button">Link as a button</a>
  <button disabled>Disabled button</button>
</p>

Text input

Example

<form>
  <p>
    <label for="textin">A <code>text</code> input field</label>
    <input name="textin" id="textin" type="text" />
  </p>
  <p>
    <label for="numberin">A <code>number</code> input field</label>
    <input name="numberin" id="numberin" type="number" />
  </p>
  <p>
    <label for="phonein">A phone number (<code>tel</code>) input field</label>
    <input name="phonein" id="phonein" type="tel" pattern="[0-9]*" />
  </p>
  <p>
    <label for="textinvalid">An invalid field</label>
    <input name="textinvalid" id="textinvalid" type="text" class="invalid" />
  </p>
    <p>
    <label for="textvalid">A valid field</label>
    <input name="textvalid" id="textvalid" type="text" class="valid" />
  </p>
  <p>
    <label for="textdisabled">A <code>disabled</code> field</label>
    <input name="textdisabled" id="textdisabled" type="text" disabled />
  </p>
</form>

Text area input

Example

<form>
  <label for="texta">An input for longer responses</label>
  <textarea name="texta" id="texta"></textarea>
</form>

Radio button input

Example

Would you like us to phone you?
<form>
  <fieldset>
    <legend id="q-phone-you">Would you like us to phone you?</legend>
    <input id="yes" name="reply" type="radio" aria-describedby="q-phone-you" value="Yes"/>
    <label for="yes">Yes</label>
    <input id="no" name="reply" type="radio" aria-describedby="q-phone-you" value="No"/>
    <label for="no">No</label>
  </fieldset>
</form>

Checkbox input

Example

Which electronic devices do you own?
<form>
  <fieldset>
    <legend id="q-devices-owned">Which electronic devices do you own?</legend>
    <input id="phone" name="reply" type="checkbox" aria-describedby="q-devices-owned" value="phone"/>
    <label for="phone">Phone</label>
    <input id="tablet" name="reply" type="checkbox" aria-describedby="q-devices-owned" value="tablet"/>
    <label for="tablet">Tablet</label>
    <input id="laptop" name="reply" type="checkbox" aria-describedby="q-devices-owned" value="laptop"/>
    <label for="laptop">Laptop</label>
    <input id="desktop" name="reply" type="checkbox" aria-describedby="q-devices-owned" value="desktop"/>
    <label for="desktop">Desktop computer</label>
  </fieldset>
</form>

Accessibility

Example

Your Tax File Number is on your payslip. For example, 123 456 789.
<form>
  <label for="tfn">Tax File Number</label>
  <span class="hint" id="tfn-hint">
    Your Tax File Number is on your payslip. For example, 123 456 789.
  </span>
  <input type="number" id="tfn" aria-describedby="tfn-hint" />
</form>