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.

Select

v2.0.10

Select provides a means to select a single item from a collapsible list. Use of select helps to reduce input errors and screen space. It's commonly used to help users enter a value into a form field.

Released

History
View changes
Install
npm i @gov.au/select
Tags
Requires
Contributors
  • Simon Schwartz avatar picture
  • Trevor Brennan avatar picture
  • Patrick De Young avatar picture
  • Gary Broadbent avatar picture
  • Dominik Wilkowski avatar picture
  • Alex Page avatar picture

Default

Note: Select boxes (drop-down lists) have been provided in the system by necessity but should be avoided where possible. Select boxes are implemented differently on various devices and are proven to be difficult to use for users with low digital literacy. Instead consider using text inputs or for multiple-choice options try radio buttons.

Example

<!--
  Light:  <select class="au-select au-select--block">
  Dark:   <select class="au-select au-select--block au-select--dark">
-->

<label for="select1">What option?</label>
<select id="select1" class="au-select">
  <option value="">Please select</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
/*
  Light:  <AUselect options={[
  Dark:   <AUselect dark options={[
*/

import AUselect from '@gov.au/select';

<AUselect id="select1" options={[
  {
    value: '',
    text: 'Please select',
  },
  {
    value: '1',
    text: 'Option 1',
  },
  {
    value: '2',
    text: 'Option 2',
  },
  {
    value: '3',
    text: 'Option 3',
  },
]} />

Block

Use an .au-text-input--block class to make a select box fill the available space.

Example

<!--
  Light:  <select class="au-select au-select--block">
  Dark:   <select class="au-select au-select--block au-select--dark">
-->

<label for="select1block">What option?</label>
<select id="select1block" class="au-select au-select--block">
  <option value="">Please select</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
/*
  Light:  <AUselect block options={[
  Dark:   <AUselect block dark options={[
*/

import AUselect from '@gov.au/select';

<AUselect block id="select1block" options={[
  {
    value: '',
    text: 'Please select',
  },
  {
    value: '1',
    text: 'Option 1',
  },
  {
    value: '2',
    text: 'Option 2',
  },
  {
    value: '3',
    text: 'Option 3',
  },
]} />

Valid and invalid states

Add a border around select boxes to indicate whether user input is valid or invalid.

Example

<!--
Valid:    <select class="au-select au-select--valid">
Invalid:  <select class="au-select au-select--invalid">
-->

<label for="select1block">What option?</label>
<select id="select1block" class="au-select au-select--valid">
  <option value="">Please select</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
/*
  Valid:  <AUselect status="valid" options={[
  Invalid:   <AUselect status="invalid" options={[
*/

import AUselect from '@gov.au/select';

<AUselect valid id="select1block" options={[
  {
    value: '',
    text: 'Please select',
  },
  {
    value: '1',
    text: 'Option 1',
  },
  {
    value: '2',
    text: 'Option 2',
  },
  {
    value: '3',
    text: 'Option 3',
  },
]}
status="invalid"/>

Disabled

Disabled select boxes are unusable and can not be clicked. This prevents a user from interacting with the input element until another action is complete. Disabled input elements in a form will not be submitted.

Example

<!--
Light: <select class="au-select" disabled>
Dark:  <select class="au-select au-select--dark" disabled>
-->

<label for="select1disabled">What option?</label>
<select id="select1disabled" class="au-select" disabled>
  <option value="">Please select</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
/*
  Light:  <AUselect disabled options={[
  Dark:   <AUselect disabled dark options={[
*/

import AUselect from '@gov.au/select';

<AUselect valid id="select1disabled" options={[
  {
    value: '',
    text: 'Please select',
  },
  {
    value: '1',
    text: 'Option 1',
  },
  {
    value: '2',
    text: 'Option 2',
  },
  {
    value: '3',
    text: 'Option 3',
  },
]} />