Select

Generates a select input.

Example usage

{{
    form.select({
        'label': 'Pick a colour',
        'id': 'foo',
        'options': [
            {
                'label': 'Choose',
                'value': ''
            },
            {
                'label': 'Red',
                'value': 'colour_red'
            },
            {
                'label': 'Blue',
                'value': 'colour_blue'
            }
        ]
    })
}}

See the Pen form - select by Paul Stanton (@stanton) on CodePen.

Options applied to parent wrapper

Option Type Description
class string A space separated list of class names
guidance string Text to be displayed in a popover, adds a (?) icon after the input
guidance-container string Element to bind guidance popover scroll behaviour to (default body)
help string Additional guidance information to be displayed next to the input
label string Text for the <label> companion element
required bool Visually indicates that the field must be completed

Options applied to the input

Option Type Description
disabled string Stops the element from being interactive if value = 'disabled'
form string Specific one or more forms this label belongs to
id string A unique identifier, if required
multiple boolean Whether multiple options can be selected
name string The name of this control
options hash The <option> items
required bool Adds required and aria-required="true" attributes
selected string The id of the item in options that should be initially selected
size int The number of items to display when the list is shown
data-* string Data attributes, eg: 'data-foo': 'bar'

Any other options not listed here will be applied to the input.

Option Type Description
disabled boolean If true, prevents the option from being selectable
label string Text label for the <option>
value string Value for the <option> 
{{
    form.select({
        'label': 'Example options',
        'id': 'example-options',
        'options': [
            {
                'label': 'Normal option',
                'value': 'foo'
            },
            {
                'label': 'Disabled option',
                'value': 'bar',
                'disabled': true
            }
        ]
    })
}}

Error state

{{
    form.select({
        'label': 'Pick a colour',
        'error': 'Something went wrong',
        ...

See the Pen form - select error by Pulsar (@pulsar) on CodePen.

Loading state

Add the loading spinner markup via Javascript after the select element to communicate that the user's selection is causing something else to happen on the page.

If a select element's options are being loaded or updated, the placeholder should be changed to 'Loading...' and the field disabled until this is complete.

See the Pen vNXdox by Paul Stanton (@stanton) on CodePen.

results matching ""

    No results matching ""