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

Autocomplete

Usage notes

Autocomplete fields combine a text entry with a dropdown menu, allowing users to filter longer lists to only the selections matching a query.

Default

Toggle markup


        <form class="coral-Form coral-Form--vertical">
          <label id="label1" class="coral-Form-fieldlabel">Label</label>
          <coral-autocomplete labelledby="label1">
            <coral-autocomplete-item value="ch">Chrome</coral-autocomplete-item>
            <coral-autocomplete-item value="fi">Firefox</coral-autocomplete-item>
            <coral-autocomplete-item value="ie">Internet Explorer</coral-autocomplete-item>
            <coral-autocomplete-item value="op">Opera</coral-autocomplete-item>
            <coral-autocomplete-item value="sa">Safari</coral-autocomplete-item>
          </coral-autocomplete>
        </form>

Quiet variant

Toggle markup


        <form class="coral-Form coral-Form--vertical">
          <label id="label2" class="coral-Form-fieldlabel">Label</label>
          <coral-autocomplete labelledby="label2" variant="quiet">
            <coral-autocomplete-item value="ch">Chrome</coral-autocomplete-item>
            <coral-autocomplete-item value="fi">Firefox</coral-autocomplete-item>
            <coral-autocomplete-item value="ie">Internet Explorer</coral-autocomplete-item>
            <coral-autocomplete-item value="op">Opera</coral-autocomplete-item>
            <coral-autocomplete-item value="sa">Safari</coral-autocomplete-item>
          </coral-autocomplete>
        </form>

With forced selection

Toggle markup


        <form class="coral-Form coral-Form--vertical">
          <label id="label3" class="coral-Form-fieldlabel">Label</label>
          <coral-autocomplete labelledby="label3" forceselection="">
            <coral-autocomplete-item value="ch">Chrome</coral-autocomplete-item>
            <coral-autocomplete-item value="fi">Firefox</coral-autocomplete-item>
            <coral-autocomplete-item value="ie">Internet Explorer</coral-autocomplete-item>
            <coral-autocomplete-item value="op">Opera</coral-autocomplete-item>
            <coral-autocomplete-item value="sa">Safari</coral-autocomplete-item>
          </coral-autocomplete>
        </form>

With multiple selection

Toggle markup


        <form class="coral-Form coral-Form--vertical">
          <label id="label4" class="coral-Form-fieldlabel">Label</label>
          <coral-autocomplete labelledby="label4" multiple="">
            <coral-autocomplete-item value="ch">Chrome</coral-autocomplete-item>
            <coral-autocomplete-item value="fi">Firefox</coral-autocomplete-item>
            <coral-autocomplete-item value="ie">Internet Explorer</coral-autocomplete-item>
            <coral-autocomplete-item value="op">Opera</coral-autocomplete-item>
            <coral-autocomplete-item value="sa">Safari</coral-autocomplete-item>
          </coral-autocomplete>
        </form>

With remote loading

Toggle markup


        <form class="coral-Form coral-Form--vertical">
          <label id="label5" class="coral-Form-fieldlabel">Label</label>
          <coral-autocomplete labelledby="label5" id="remote" delay="50" multiple=""></coral-autocomplete>
        </form>

        <script>
          window.addEventListener('load', function() {
            // Mocked server interaction
            window.fakejax = function(url, data, callback) {
              var requestTimeout = setTimeout(function() {
                // Filter the suggestions according to the user input
                // This would run on the server, effectively
                var suggestions = [];

                for (var i = 0; i < 10; i++) {
                  var number = i + data.start;
                  suggestions.push({
                    value: number,
                    content: 'Item ' + number
                  });
                }

                callback(suggestions);
              }, 1000);

              return {
                abort: function() {
                  // Stop previous request
                  clearTimeout(requestTimeout);
                }
              };
            };

            var autocomplete = document.getElementById('remote');

            var request;
            autocomplete.on('coral-autocomplete:showsuggestions', function(event) {
              // If a previous request was started, abort it
              if (request) {
                request.abort();
              }

              // Don't show suggestions from existing items
              // This shows a loading icon until we call addSuggestions
              event.preventDefault();

              // Get the user input as lowercase
              var userInput = event.detail.value.toLowerCase();
              var startRecord = event.detail.start;

              // Make a request and show the resulting suggestions
              request = fakejax('/api/suggestions', { query: userInput, start: startRecord }, function(suggestions) {
                autocomplete.addSuggestions(suggestions);
              });
            });

            autocomplete.on('coral-autocomplete:hidesuggestions', function() {
              // If the suggestions were hidden, abort the request
              if (request) {
                request.abort();
              }
            });
          });
        </script>

ReadOnly

Toggle markup


        <form class="coral-Form coral-Form--vertical">
          <label id="label6" class="coral-Form-fieldlabel">Label</label>
          <coral-autocomplete labelledby="label6" readonly="">
            <coral-autocomplete-item selected="" value="ch">Chrome</coral-autocomplete-item>
            <coral-autocomplete-item value="fi">Firefox</coral-autocomplete-item>
            <coral-autocomplete-item value="ie">Internet Explorer</coral-autocomplete-item>
            <coral-autocomplete-item value="op">Opera</coral-autocomplete-item>
            <coral-autocomplete-item value="sa">Safari</coral-autocomplete-item>
          </coral-autocomplete>
        </form>

Disabled

Toggle markup


        <form class="coral-Form coral-Form--vertical">
          <label id="label7" class="coral-Form-fieldlabel">Label</label>
          <coral-autocomplete labelledby="label7" disabled="">
            <coral-autocomplete-item value="ch">Chrome</coral-autocomplete-item>
            <coral-autocomplete-item value="fi">Firefox</coral-autocomplete-item>
            <coral-autocomplete-item value="ie">Internet Explorer</coral-autocomplete-item>
            <coral-autocomplete-item value="op">Opera</coral-autocomplete-item>
            <coral-autocomplete-item value="sa">Safari</coral-autocomplete-item>
          </coral-autocomplete>
        </form>

Invalid

Toggle markup


        <form class="coral-Form coral-Form--vertical">
          <label id="label8" class="coral-Form-fieldlabel">Label</label>
          <coral-autocomplete labelledby="label8" invalid="">
            <coral-autocomplete-item value="ch">Chrome</coral-autocomplete-item>
            <coral-autocomplete-item value="fi">Firefox</coral-autocomplete-item>
            <coral-autocomplete-item value="ie">Internet Explorer</coral-autocomplete-item>
            <coral-autocomplete-item value="op">Opera</coral-autocomplete-item>
            <coral-autocomplete-item value="sa">Safari</coral-autocomplete-item>
          </coral-autocomplete>
        </form>

Form Field

Toggle markup


        <form class="coral-Form coral-Form--vertical" style="max-width:300px;">
          <label id="label9" class="coral-Form-fieldlabel">Label</label>
          <coral-autocomplete class="coral-Form-field" labelledby="label9">
            <coral-autocomplete-item value="ch">Chrome</coral-autocomplete-item>
            <coral-autocomplete-item value="fi">Firefox</coral-autocomplete-item>
            <coral-autocomplete-item value="ie">Internet Explorer</coral-autocomplete-item>
            <coral-autocomplete-item value="op">Opera</coral-autocomplete-item>
            <coral-autocomplete-item value="sa">Safari</coral-autocomplete-item>
          </coral-autocomplete>
        </form>