The Australian Government coat of Arms

Communities of practice

Communities of practice

Control Input


Please provide any feedback for the Control Input component.

You can also view the component page on our documentation site for the Control Input component.


There seems to be a minimal ability to configure the base input elements.
I’m therefore assuming there will be no configurable options a la jQuery et al?

Will this be developed in the future so that there is a setting for rendering the buttons vertically? Or adding additional white space to between the label of one radio button and the clickable indicator of one horizontally aligned beside it. The example given has the age-old issue of the label between two radio button selection elements can confuse some users - especially those with dyslexia.


Hi @stephenwho

Agreed, these components need more attention. Particularly inline validation and error states. But we also have some improvements to make to layout etc Eg #364

Also agree about needing more space between an inline list of checkboxes/radios. I’ve added an issue to GitHub so that it’s tracked: #380: Spacing for inline list of Control inputs


I’m therefore assuming there will be no configurable options a la jQuery et al?

It’s very unlikely that the Design System would ever support making visual styles configurable through jQuery. Style is intentionally separate from function, so the system uses CSS BEM classes to provide any visual configuration options rather than JavaScript.

Teams will always be expected to write code to address their own specific user’s needs. If it appears that many teams have the same need then it would be considered for inclusion in the system.


Hey all,

We’ve updated the markup of our control inputs in v3.0.0. We are now using explicit labelling with the for and id relationship for our radios and checkboxes.

i.e. Previously we were doing this:

<label class="au-control-input">
  <input type="checkbox" />
  <span>Option 1</span>

And now:

<div class="au-control-input">
  <input type="checkbox" id="example" />
  <label for="example">Option 1</label>

The documentation site has been updated to reflect this change.


Nice one, thanks @sukhraj.ghuman!

This looks like a sane application of


Yes correct @gordon.grace . Another reason why we did this was because some versions of the Dragon screen reader did not support implicit labelling.