Control input

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

Related components

Feedback