Text inputs

v3.0.0

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 @gold.au/text-inputs
Tags
Requires
Contributors
  • Petra Gulicher avatar picture
  • Patrick De Young avatar picture
  • Kiri Hoy avatar picture
  • Alexander Sadleir avatar picture
  • Trevor Brennan avatar picture
  • Hannah J. Nicdao avatar picture
  • Simon Pascal Klein avatar picture
  • Julian Fleetwood avatar picture
  • Alex Page avatar picture
  • Gary Broadbent avatar picture
  • Dominik Wilkowski 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 '@gold.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 '@gold.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 '@gold.au/text-inputs';

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

Valid and invalid inputs

Add a border to text inputs and text areas to indicate whether user input is valid (validates according to the elements settings) or invalid (does not validate according to the elements settings).

Example

<!--
  Valid:  <input class="au-text-input au-text-input--valid">
  Invalid:   <input class="au-text-input au-text-input--invalid" aria-invalid="true">
-->

<label for="text-input">label text</label>
<input class="au-text-input au-text-input--valid" name="text-input" id="text-input" type="text" value="value">

/*
  Valid: <AUtextInput status="valid" />
  Invalid: <AUtextInput status="invalid" aria-invalid="true" />
*/

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

<label htmlFor="text-input" >label text</label>
<AUtextInput status="valid" />

Disabled text inputs

Disabled input elements are unusable and can not be clicked. This prevents a user from interacting with the input element until another action is complete. Disabled input elements in a form will not be submitted.

Example

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

<label for="text-input">label text</label>
<input class="au-text-input" name="text-input" id="text-input" type="text" value="value" disabled>

/*
  Light:  <AUtextInput>
  Dark:   <AUtextInput dark disabled>
*/

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

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

Different width sizes for inputs

The width of a text input field should indicate the amount of information expected to be entered into the field. The size of the field acts as a visual constraint for the end user. As an example, input fields for postcodes should have a smaller width than fields for emails.

Example

<!--
  XS:  <input class="au-text-input au-text-input--width-xs">
  SM:  <input class="au-text-input au-text-input--width-sm">
  MD:  <input class="au-text-input au-text-input--width-md">
  LG:  <input class="au-text-input au-text-input--width-lg">
  XL:  <input class="au-text-input au-text-input--width-xl">

-->

<label for="text-input-sm">label text</label>
<input class="au-text-input--width-sm" name="text-input-sm" id="text-input-sm" type="text" value="2600">

<!--
  XS:  <AUtextInput width="xs" />
  SM:  <AUtextInput width="sm" />
  MD:  <AUtextInput width="md" />
  LG:  <AUtextInput width="lg" />
  XL:  <AUtextInput width="xl" />
  
-->

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

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

Related components

Feedback