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.8

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
  • Gary Broadbent avatar picture
  • Alex Page avatar picture
  • Patrick De Young avatar picture
  • Dominik Wilkowski avatar picture
  • Simon Schwartz avatar picture
  • Trevor Brennan 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',
  },
]} />