Heartwood

Autosuggest: Country 

<div class="text-input ">
    <div class="text-input__pre">
        <label class="text-input__label" for="">Country</label>
    </div>
    <div class="autosuggest__wrapper">
        <div class="text-input__inner">
            <input type="" class="text-input__input" placeholder="Select your Country" />
        </div>
        <div class="autosuggest">
            <div class="autosuggest__no-results">
                <p class="autosuggest__no-results-title">No matching countries found.</p>
                <p class="autosuggest__no-results-subtitle">Please adjust your search and try again.</p>
            </div>
        </div>
    </div>
    <p class="text-input__helper"></p>
</div>
 
<div class="text-input {{class}}">
	{{#if label}}
		{{> @input-pre }}
	{{/if}}
	<div class="autosuggest__wrapper">
		{{> @input-inner }}
		<div class="autosuggest">
			{{#if options}}
			<ul class="autosuggest__list">
				{{#each options}}
					<li class="autosuggest__list-item">
						{{> @button className="btn-small autosuggest__list-item-inner"}}
					</li>
				{{/each}}
			</ul>
			{{else}}
				<div class="autosuggest__no-results">
					<p class="autosuggest__no-results-title">No matching countries found.</p>
					<p class="autosuggest__no-results-subtitle">Please adjust your search and try again.</p>
				</div>
			{{/if}}
		</div>
	</div>
	{{> @input-helper}}
</div>
 
{
  "label": "Country",
  "placeholder": "Select your Country",
  "options": null
}

Autosuggest

An Autosuggest works like a combination of a Select and a Search input. Autosuggests are useful when there is a large but limited set of acceptable options, as well as for Natural Language Processing (NLP) inputs.

When to use:

Use an Autosuggest when there is a large but limited set of acceptable responses, or to help guide the user to what they are looking for.

When not to use:

  • When there is no limit on potential responses; instead use a Text Input