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

v3.0.0

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

Checkbox

Check boxes allow users to select one or more items.

Example

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

<div class="au-control-input">
  <input class="au-control-input__input" type="checkbox" name="checkbox-ex" id="cb-phone">
  <label class="au-control-input__text" for="cb-phone">Phone</label>
</div>
<div class="au-control-input">
  <input class="au-control-input__input" type="checkbox" name="checkbox-ex" id="cb-tablet" checked>
  <label class="au-control-input__text" for="cb-tablet">Tablet</label>
</div>
/*
  Light:  <AUcheckbox>
  Dark:   <AUcheckbox dark>
*/

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

<AUcheckbox label="Phone" name="checkbox-ex" id="cb-phone"/>
<AUcheckbox label="Tablet" name="checkbox-ex" id="cb-tablet" defaultChecked />

Radio

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

Example

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

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

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

<AUradio label="Phone" name="radio-ex" id="radio-phone-block" />
<AUradio label="Tablet" name="radio-ex" id="radio-tablet-block" 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:  <div class="au-control-input au-control-input--block">
  Dark:   <div class="au-control-input au-control-input--block au-control-input--dark">
-->

<div class="au-control-input au-control-input--block">
  <input class="au-control-input__input" type="checkbox" name="checkbox-ex" id="phone-cb-block">
  <label class="au-control-input__text" for="phone-cb-block">Phone</label>
</div>
<div class="au-control-input au-control-input--block">
  <input class="au-control-input__input" type="checkbox" name="checkbox-ex" id="tablet-cb-block" checked>
  <label class="au-control-input__text" for="tablet-cb-block">Tablet</label>
</div>
<div class="au-control-input au-control-input--block">
  <input class="au-control-input__input" type="checkbox" name="checkbox-ex" id="laptop-cb-block" checked>
  <label class="au-control-input__text" for="laptop-cb-block">Laptop</label>
</div>
/*
  Light:  <AUcheckbox>
  Dark:   <AUcheckbox dark>
*/

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

<AUcheckbox label="Phone" name="checkbox-ex" id="cb-phone" block />
<AUcheckbox label="Tablet" name="checkbox-ex" id="cb-tablet" block defaultChecked />
<AUcheckbox label="Laptop" name="checkbox-ex" id="cb-laptop" block defaultChecked />

Radio Block

Vertically stacked radio buttons.

Example

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

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

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

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

Valid and invalid states

Add a border around the control inputs to indicate valid or invalid selections.

Example

<!--
  Valid:    <div class="au-control-input au-control-input--valid">
  Invalid:  <div class="au-control-input au-control-input--invalid">
-->

<div class="au-control-input au-control-input--valid">
  <input class="au-control-input__input" type="radio" name="radio-ex" id="phone-invalid">
  <label class="au-control-input__text" for="phone-invalid">Phone</label>
</div>
<div class="au-control-input au-control-input--invalid">
  <input class="au-control-input__input" type="radio" name="radio-ex" id="tablet-invalid" checked>
  <label class="au-control-input__text" for="tablet-invalid">Tablet</label>
</div>
/*
  Valid:  <AUradio status="valid">
  Invalid:   <AUradio status="invalid">
*/

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

<AUradio label="Phone" status="valid" name="radio-ex" id="radio-phone-invalid"/>
<AUradio label="Tablet" status="invalid" name="radio-ex" id="radio-tablet-invalid" defaultChecked />

Disabled control inputs

Disabled control inputs can be used to indicate inputs that are no longer valid or expired.

Example

<!--
  Checkbox:  <input class="au-control-input__input" type="checkbox" name="checkbox-ex" disabled>
-->

<div class="au-control-input">
  <input class="au-control-input__input" type="radio" name="radio-ex" id="phone-disabled" disabled>
  <label class="au-control-input__text" for="phone-disabled">Phone</label>
</div>
<div class="au-control-input">
  <input class="au-control-input__input" type="radio" name="radio-ex" id="tablet-disabled" disabled>
  <label class="au-control-input__text" for="tablet-disabled">Tablet</label>
</div>
/*
  Checkbox:  <AUcheckbox disabled>
*/


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

<AUradio label="Phone"  name="radio-ex" id="radio-phone" disabled/>
<AUradio label="Tablet" name="radio-ex" id="radio-tablet" disabled />

Small inputs

Smaller versions of control inputs.

Example

<!--
  Checkbox:  <input class="au-control-input__input" type="checkbox" name="checkbox-ex">
-->

<div class="au-control-input au-control-input--small">
  <input class="au-control-input__input" type="radio" id="phone-class-small" name="radio-ex">
  <label class="au-control-input__text" for="phone-class-small">Phone</label>
</div>
<div class="au-control-input au-control-input--small">
  <input class="au-control-input__input" type="radio" name="radio-ex" id="tablet-class-small" checked>
  <label class="au-control-input__text" for="tablet-class-small">Tablet</label>
</div>
/*
  Checkbox:  <AUcheckbox small>
*/

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

<AUradio label="Phone"  name="radio-ex" id="cb-phone-sm" small />
<AUradio label="Tablet" name="radio-ex" id="cb-tablet-sm" small defaultChecked />