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

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
  • Simon Pascal Klein avatar picture
  • Dominik Wilkowski avatar picture
  • Kiri Hoy avatar picture
  • Hannah J. Nicdao avatar picture
  • Patrick De Young avatar picture
  • Julian Fleetwood avatar picture
  • Alexander Sadleir avatar picture
  • Gary Broadbent avatar picture
  • Petra Gulicher avatar picture
  • Alex Page avatar picture
  • Trevor Brennan avatar picture

React Usage

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

<label htmlFor="name" >Your name?</label>
<AUtextInput id="name" block />

Props

Prop name Type Description
as string The kind of input, can be either 'input' or 'textarea', default: 'input'
block string Add the block variation class
number string Add the number styling class
status number Mark this field as either 'valid' or 'invalid'
dark boolean A dark variation of the component
width string Width of text input, can be either xs, sm, md, lg or xl

All other props are spread into the component

Exports

Name Type Description
AUtextInput default The textInput component

node_modules import

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

pancake import

import AUtextInput from './text-input';