node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »

@gov.au/select

@gov.au/select

The form select element for multiple options

Contents


Install

yarn add @gov.au/select
npm install @gov.au/select --save-dev

⬆ back to top


Usage

⬆ back to top


React

Usage:

import Select from './select.js';
 
<Select id="exampleSelect" options={[
    {
        value: '',
        text: 'Please select',
    },
    {
        value: '1',
        text: 'Option 1',
    },
    {
        value: '2',
        text: 'Option 2',
    },
]} />

All props:

<Select
    id="unique"            {/* Unique ID, a must so you can tie a label to it */}
    block={ true }         {/* The block option to make the select fill the available width, optional */}
    onChange={ () => {} }  {/* A function to execute when the select value is changed, optional */}
    options={[             {/* All options in a neat array */}
        {
            value: '1',        {/* The value attribute of the option */}
            text: 'Option 1',  {/* The text of the option */}
        },
    ]}
/>

For more details have a look at the usage example.

⬆ back to top


Dependency graph

select
└─ core

⬆ back to top


Build

⬆ back to top


Tests

The visual test: http://uikit.apps.staging.digital.gov.au/packages/select/tests/site/

⬆ back to top


Release History

  • v0.3.0 - Added pancake-react plugin, ES5 main file
  • v0.2.0 - Added react component
  • v0.1.0 - 💥 Initial version

⬆ back to top


License

Copyright (c) Commonwealth of Australia. Licensed under MIT.

⬆ back to top

};