Select
v3.0.0Select 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
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',
},
]} />