Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Select

Usage notes

Select fields allow users to choose from a list of options in a limited space. The list of options can change based on the context.

Default

Toggle markup


        <coral-select>
          <coral-select-item value="actions">
            <coral-icon alt="" icon="actions"></coral-icon>
            Actions
          </coral-select-item>
          <coral-select-item value="add">
            <coral-icon alt="" icon="add"></coral-icon>
            Add
          </coral-select-item>
          <coral-select-item value="add-circle">
            <coral-icon alt="" icon="addCircle"></coral-icon>
            Add-Circle
          </coral-select-item>
          <coral-select-item value="alert">
            <coral-icon alt="" icon="alert"></coral-icon>
            Alert
          </coral-select-item>
          <coral-select-item value="alert-add">
            <coral-icon alt="" icon="alertAdd"></coral-icon>
            Alert-Add
          </coral-select-item>
          <coral-select-item value="alias">
            <coral-icon alt="" icon="alias"></coral-icon>
            Alias
          </coral-select-item>
          <coral-select-item value="anchor">
            <coral-icon alt="" icon="anchor"></coral-icon>
            Anchor
          </coral-select-item>
          <coral-select-item value="annotate">
            <coral-icon alt="" icon="AnnotatePen"></coral-icon>
            Annotate
          </coral-select-item>
          <coral-select-item value="answer">
            <coral-icon alt="" icon="answer"></coral-icon>
            Answer
          </coral-select-item>
        </coral-select>

With placeholder

Toggle markup


        <coral-select placeholder="Choose an item">
          <coral-select-item value="tza">Tanzania - United Republic of Tanzania, Northwest</coral-select-item>
          <coral-select-item value="are">United Arab Emirates</coral-select-item>
          <coral-select-item value="gbr">United Kingdom</coral-select-item>
          <coral-select-item value="usa">United States of America and the republic for which it stands, one nation</coral-select-item>
        </coral-select>

Initially selected

Toggle markup


        <coral-select>
          <coral-select-item value="actions">
            <coral-icon alt="" icon="actions"></coral-icon>
            Actions
          </coral-select-item>
          <coral-select-item value="add" selected="">
            <coral-icon alt="" icon="add"></coral-icon>
            Add
          </coral-select-item>
          <coral-select-item value="add-circle">
            <coral-icon alt="" icon="addCircle"></coral-icon>
            Add-Circle
          </coral-select-item>
        </coral-select>

Initially selected + Placeholder

Toggle markup


        <coral-select placeholder="Choose a continent">
          <coral-select-item value="am">America</coral-select-item>
          <coral-select-item value="eu" selected="">Europe</coral-select-item>
          <coral-select-item value="af">Africa</coral-select-item>
          <coral-select-item value="as">Asia</coral-select-item>
          <coral-select-item value=""></coral-select-item>
        </coral-select>

Quiet + Placeholder

Toggle markup


        <coral-select placeholder="Choose a continent" variant="quiet">
          <coral-select-item value="am">America</coral-select-item>
          <coral-select-item value="eu">Europe</coral-select-item>
          <coral-select-item value="af">Africa</coral-select-item>
          <coral-select-item value="as">Asia</coral-select-item>
          <coral-select-item value="oc">Oceania</coral-select-item>
        </coral-select>

Loading remote data

Toggle markup


        <coral-select id="remote" placeholder="Remote data"></coral-select>

        <script>
          window.addEventListener('load', function() {
            // Fake remote data
            var data = [];
            for (var i = 1; i <= 1000; i++) {
              data.push('Item ' + i);
            }

            var MULTIPLE_PAGE_SIZE = 20;
            var LOADING_TIME = 1000;

            var timeout;
            var select = document.getElementById('remote');

            select.addEventListener('coral-select:showitems', function(event) {

              // Based on the amount of the items that the select currently has
              var start = event.detail.start;
              var end = MULTIPLE_PAGE_SIZE + start;

              // If we have reached the end of the array there is nothing else to do
              if (start >= data.length) {
                return;
              }

              // Stop previous request
              clearTimeout(timeout);

              // Causes it to show the loading inside the selectlist
              event.preventDefault();

              // Make a request and show suggestions from that
              timeout = setTimeout(function() {
                data.slice(start, end).forEach(function(item) {
                  select.items.add({
                    content: {
                      textContent: item
                    }
                  });
                });
              }, LOADING_TIME);
            });
          });
        </script>

Multiple selection

Toggle markup


        <coral-select multiple="">
          <coral-select-item value="actions">
            <coral-icon alt="" icon="actions"></coral-icon>
            Actions
          </coral-select-item>
          <coral-select-item value="add">
            <coral-icon alt="" icon="add"></coral-icon>
            Add
          </coral-select-item>
          <coral-select-item value="add-circle">
            <coral-icon alt="" icon="addCircle"></coral-icon>
            Add-Circle
          </coral-select-item>
          <coral-select-item value="alert">
            <coral-icon alt="" icon="alert"></coral-icon>
            Alert
          </coral-select-item>
          <coral-select-item value="alert-add">
            <coral-icon alt="" icon="alertAdd"></coral-icon>
            Alert-Add
          </coral-select-item>
          <coral-select-item value="alias">
            <coral-icon alt="" icon="alias"></coral-icon>
            Alias
          </coral-select-item>
          <coral-select-item value="anchor">
            <coral-icon alt="" icon="anchor"></coral-icon>
            Anchor
          </coral-select-item>
          <coral-select-item value="annotate">
            <coral-icon alt="" icon="AnnotatePen"></coral-icon>
            Annotate
          </coral-select-item>
          <coral-select-item value="answer">
            <coral-icon alt="" icon="answer"></coral-icon>
            Answer
          </coral-select-item>
        </coral-select>

Placeholder + Multiple

Toggle markup


        <coral-select multiple="" placeholder="Choose an action">
          <coral-select-item value="actions">
            <coral-icon alt="" icon="actions"></coral-icon> Actions </coral-select-item>
          <coral-select-item value="add">
            <coral-icon alt="" icon="add"></coral-icon> Add </coral-select-item>
          <coral-select-item value="add-circle">
            <coral-icon icon="addCircle"></coral-icon> Add-Circle </coral-select-item>
          <coral-select-item value="alert">
            <coral-icon alt="" icon="alert"></coral-icon> Alert </coral-select-item>
          <coral-select-item value="alert-add">
            <coral-icon alt="" icon="alertAdd"></coral-icon> Alert-Add </coral-select-item>
          <coral-select-item value="alias">
            <coral-icon alt="" icon="alias"></coral-icon> Alias </coral-select-item>
          <coral-select-item value="anchor">
            <coral-icon alt="" icon="anchor"></coral-icon> Anchor </coral-select-item>
          <coral-select-item value="annotate">
            <coral-icon alt="" icon="AnnotatePen"></coral-icon> Annotate </coral-select-item>
          <coral-select-item value="answer">
            <coral-icon alt="" icon="answer"></coral-icon> Answer </coral-select-item>
        </coral-select>

Initially selected + Multiple

Toggle markup


        <coral-select multiple="">
          <coral-select-item value="actions">
            <coral-icon alt="" icon="actions"></coral-icon>
            Actions
          </coral-select-item>
          <coral-select-item value="add" selected="">
            <coral-icon alt="" icon="add"></coral-icon>
            Add
          </coral-select-item>
          <coral-select-item value="add-circle">
            <coral-icon alt="" icon="addCircle"></coral-icon>
            Add-Circle
          </coral-select-item>
          <coral-select-item value="adjust" selected="">
            <coral-icon alt="" icon="adjust"></coral-icon> Adjust </coral-select-item>
        </coral-select>

Initially selected + Multiple + Placeholder

Toggle markup


        <coral-select multiple="" placeholder="Choose an action">
          <coral-select-item value="actions">
            <coral-icon alt="" icon="actions"></coral-icon>
            Actions
          </coral-select-item>
          <coral-select-item value="add" selected="">
            <coral-icon alt="" icon="add"></coral-icon>
            Add
          </coral-select-item>
          <coral-select-item value="add-circle">
            <coral-icon alt="" icon="addCircle"></coral-icon>
            Add-Circle
          </coral-select-item>
        </coral-select>

Required

Toggle markup


        <coral-select required="" placeholder="Choose an item">
          <coral-select-item value="actions">
            <coral-icon alt="" icon="actions"></coral-icon>
            Actions
          </coral-select-item>
          <coral-select-item value="add">
            <coral-icon alt="" icon="add"></coral-icon>
            Add
          </coral-select-item>
          <coral-select-item value="add-circle">
            <coral-icon alt="" icon="addCircle"></coral-icon>
            Add-Circle
          </coral-select-item>
          <coral-select-item value="alert">
            <coral-icon alt="" icon="alert"></coral-icon>
            Alert
          </coral-select-item>
          <coral-select-item value="alert-add">
            <coral-icon alt="" icon="alertAdd"></coral-icon>
            Alert-Add
          </coral-select-item>
          <coral-select-item value="alias">
            <coral-icon alt="" icon="alias"></coral-icon>
            Alias
          </coral-select-item>
          <coral-select-item value="anchor">
            <coral-icon alt="" icon="anchor"></coral-icon>
            Anchor
          </coral-select-item>
          <coral-select-item value="annotate">
            <coral-icon alt="" icon="AnnotatePen"></coral-icon>
            Annotate
          </coral-select-item>
          <coral-select-item value="answer">
            <coral-icon alt="" icon="answer"></coral-icon>
            Answer
          </coral-select-item>
        </coral-select>

Invalid

Toggle markup


        <coral-select invalid="">
          <coral-select-item value="actions">
            <coral-icon alt="" icon="actions"></coral-icon>
            Actions
          </coral-select-item>
          <coral-select-item value="add">
            <coral-icon alt="" icon="add"></coral-icon>
            Add
          </coral-select-item>
          <coral-select-item value="add-circle">
            <coral-icon alt="" icon="addCircle"></coral-icon>
            Add-Circle
          </coral-select-item>
          <coral-select-item value="alert">
            <coral-icon alt="" icon="alert"></coral-icon>
            Alert
          </coral-select-item>
          <coral-select-item value="alert-add">
            <coral-icon alt="" icon="alertAdd"></coral-icon>
            Alert-Add
          </coral-select-item>
          <coral-select-item value="alias">
            <coral-icon alt="" icon="alias"></coral-icon>
            Alias
          </coral-select-item>
          <coral-select-item value="anchor">
            <coral-icon alt="" icon="anchor"></coral-icon>
            Anchor
          </coral-select-item>
          <coral-select-item value="annotate">
            <coral-icon alt="" icon="AnnotatePen"></coral-icon>
            Annotate
          </coral-select-item>
          <coral-select-item value="answer">
            <coral-icon alt="" icon="answer"></coral-icon>
            Answer
          </coral-select-item>
        </coral-select>

Disabled

Toggle markup


        <coral-select placeholder="Choose an item" disabled="">
          <coral-select-item value="tza">Tanzania - United Republic of Tanzania, Northwest</coral-select-item>
          <coral-select-item value="are">United Arab Emirates</coral-select-item>
          <coral-select-item value="gbr">United Kingdom</coral-select-item>
          <coral-select-item value="usa">United States of America and the republic for which it stands, one nation</coral-select-item>
        </coral-select>

Quiet + Placeholder + Disabled

Toggle markup


        <coral-select placeholder="Choose a continent" variant="quiet" disabled="">
          <coral-select-item value="am">America</coral-select-item>
          <coral-select-item value="eu">Europe</coral-select-item>
          <coral-select-item value="af">Africa</coral-select-item>
          <coral-select-item value="as">Asia</coral-select-item>
          <coral-select-item value="oc">Oceania</coral-select-item>
        </coral-select>

ReadOnly

Toggle markup


        <coral-select readonly="">
          <coral-select-item value="actions">
            <coral-icon alt="" icon="actions"></coral-icon>
            Actions
          </coral-select-item>
          <coral-select-item value="add">
            <coral-icon alt="" icon="add"></coral-icon>
            Add
          </coral-select-item>
          <coral-select-item value="add-circle">
            <coral-icon alt="" icon="addCircle"></coral-icon>
            Add-Circle
          </coral-select-item>
          <coral-select-item value="alert">
            <coral-icon alt="" icon="alert"></coral-icon>
            Alert
          </coral-select-item>
          <coral-select-item value="alert-add">
            <coral-icon alt="" icon="alertAdd"></coral-icon>
            Alert-Add
          </coral-select-item>
          <coral-select-item value="alias">
            <coral-icon alt="" icon="alias"></coral-icon>
            Alias
          </coral-select-item>
          <coral-select-item value="anchor">
            <coral-icon alt="" icon="anchor"></coral-icon>
            Anchor
          </coral-select-item>
          <coral-select-item value="annotate">
            <coral-icon alt="" icon="AnnotatePen"></coral-icon>
            Annotate
          </coral-select-item>
          <coral-select-item value="answer">
            <coral-icon alt="" icon="answer"></coral-icon>
            Answer
          </coral-select-item>
        </coral-select>

Form Field

Toggle markup


        <form class="coral-Form coral-Form--vertical" style="max-width:300px;">
          <label id="label" class="coral-FieldLabel">Label</label>
          <coral-select class="coral-Form-field" labelledby="label">
            <coral-select-item>Item 1</coral-select-item>
            <coral-select-item>Item 2</coral-select-item>
            <coral-select-item>Item 3</coral-select-item>
          </coral-select>
        </form>