Select

v3.0.0

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 @gold.au/select
Tags
Requires
Contributors
  • Trevor Brennan avatar picture
  • Patrick De Young avatar picture
  • Gary Broadbent avatar picture
  • Alex Page avatar picture
  • Dominik Wilkowski avatar picture
  • Simon Schwartz avatar picture

Default

Select boxes (drop-down lists) allow users to select a value from a list.

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 '@gold.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 '@gold.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 '@gold.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 '@gold.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',
  },
]} />