dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Text inputs

v2.0.9

Text inputs are input fields typically used in forms that allow the user to enter text data in a structured format. Text inputs should be accompanied by labels.

Released

History
View changes
Install
npm i @gov.au/text-inputs
Tags
Requires
Contributors
  • Alex Page avatar picture
  • Patrick De Young avatar picture
  • Gary Broadbent avatar picture
  • Hannah J. Nicdao avatar picture
  • Julian Fleetwood avatar picture
  • Dominik Wilkowski avatar picture
  • Alexander Sadleir avatar picture
  • Simon Pascal Klein avatar picture
  • Petra Gulicher avatar picture
  • Trevor Brennan avatar picture

Default

The default text inputs do not have a width applied to them.

Example

<!--
  Light:  <input class="au-text-input">
  Dark:   <input class="au-text-input au-text-input--dark">
-->

<label for="text-input">label text</label>
<input class="au-text-input" name="text-input" id="text-input" type="text" value="value">
/*
  Light:  <AUtextInput>
  Dark:   <AUtextInput dark>
*/

import AUtextInput from '@gov.au/text-inputs';

<label htmlFor="text-input" >label text</label>
<AUtextInput id="text-input" />

Block text inputs

The 'block' text inputs use an .au-text-input--block class to make them fill the available space.

Example

<!--
  Light:  <input class="au-text-input au-text-input--block">
  Dark:   <input class="au-text-input au-text-input--block au-text-input--dark">
-->

<label for="text-input-block">label text</label>
<input class="au-text-input au-text-input--block" name="text-input-block" id="text-input-block" type="text" value="value">
/*
  Light:  <AUtextInput block>
  Dark:   <AUtextInput block dark>
*/

import AUtextInput from '@gov.au/text-inputs';

<label htmlFor="text-input-block">label text</label>
<AUtextInput id="text-input-block" block />

Text area

Also known as a multiline input.

Text areas are for long form text inputs and can be scaled up or down in size by the user, in browsers that support the feature.

Because text areas are intended for free typing they should ideally use the majority of the available space by using the .au-text-input--block class.

Example

<!--
  Light:  <textarea class="au-text-input au-text-input--block">
  Dark:   <textarea class="au-text-input au-text-input--block au-text-input--dark">
-->

<label for="textarea">label text</label>
<textarea class="au-text-input au-text-input--block" name="textarea" id="textarea">
  Value
</textarea>
/*
  Light:  <AUtextInput block>
  Dark:   <AUtextInput block dark>
*/

import AUtextInput from '@gov.au/text-inputs';

<label htmlFor="textarea" block >label text</label>
<AUtextInput as="textarea" id="textarea" block />