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.

Control input

v2.1.7

Control inputs help users input one or more selections from multiple options. Our control inputs consist of checkboxes and radio buttons.

Released

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

Checkbox

Check boxes allow users to select one or more items.

Example

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

<label class="au-control-input">
  <input class="au-control-input__input" type="checkbox" name="checkbox-ex">
  <span class="au-control-input__text">Phone</span>
</label>
<label class="au-control-input">
  <input class="au-control-input__input" type="checkbox" name="checkbox-ex" checked>
  <span class="au-control-input__text">Tablet</span>
</label>
/*
  Light:  <AUcheckbox>
  Dark:   <AUcheckbox dark>
*/

import { AUcheckbox } from '@gov.au/control-input';

<AUcheckbox label="Phone" name="checkbox-ex" />
<AUcheckbox label="Tablet" name="checkbox-ex" defaultChecked />

Radio

Radio inputs allow users to select one item at a time.

Example

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

<label class="au-control-input">
  <input class="au-control-input__input" type="radio" name="radio-ex">
  <span class="au-control-input__text">Phone</span>
</label>
<label class="au-control-input">
  <input class="au-control-input__input" type="radio" name="radio-ex" checked>
  <span class="au-control-input__text">Tablet</span>
</label>
/*
  Light:  <AUradio>
  Dark:   <AUradio dark>
*/

import { AUradio } from '@gov.au/control-input';

<AUradio label="Phone" name="radio-ex" />
<AUradio label="Tablet" name="radio-ex" defaultChecked />

Checkbox Block

Inline checkbox options can sometimes be difficult to scan. Users may find it challenging to determine with which label the checkbox option corresponds: the one before the checkbox or the one after. Vertical positioning of checkbox, with one choice per line, eliminates this potential cause for confusion.

Example

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

<label class="au-control-input">
  <input class="au-control-input__input" type="checkbox" name="checkbox-ex">
  <span class="au-control-input__text">Phone</span>
</label>
<label class="au-control-input">
  <input class="au-control-input__input" type="checkbox" name="checkbox-ex" checked>
  <span class="au-control-input__text">Tablet</span>
</label>
<label class="au-control-input">
  <input class="au-control-input__input" type="checkbox" name="checkbox-ex" checked>
  <span class="au-control-input__text">Laptop</span>
</label>
/*
  Light:  <AUcheckbox>
  Dark:   <AUcheckbox dark>
*/

import { AUcheckbox } from '@gov.au/control-input';

<AUcheckbox label="Phone" name="checkbox-ex" block />
<AUcheckbox label="Tablet" name="checkbox-ex" block defaultChecked />
<AUcheckbox label="Laptop" name="checkbox-ex" block defaultChecked />

Radio Block

Vertically stacked radio buttons.

Example

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

<label class="au-control-input au-control-input--block">
  <input class="au-control-input__input" type="radio" name="radio-ex">
  <span class="au-control-input__text">Phone</span>
</label>
<label class="au-control-input au-control-input--block">
  <input class="au-control-input__input" type="radio" name="radio-ex" checked>
  <span class="au-control-input__text">Tablet</span>
</label>
<label class="au-control-input au-control-input--block">
  <input class="au-control-input__input" type="radio" name="radio-ex">
  <span class="au-control-input__text">Laptop</span>
</label>
/*
  Light:  <AUradio>
  Dark:   <AUradio dark>
*/

import { AUradio } from '@gov.au/control-input';

<AUradio label="Phone" name="radio-ex" block />
<AUradio label="Tablet" name="radio-ex" block defaultChecked />
<AUradio label="Laptop" name="radio-ex" block />