Heartwood

Select 

<!-- Default -->
<div class="select__wrapper">
    <div class="text-input__pre">
        <label class="text-input__label" for="country">Country</label>
    </div>
    <div class="select text-input__inner ">
        <select>
			<option>United States</option>
			<option>Canada</option>
			<option>New Jersey</option>
		</select>
        <?xml version="1.0" encoding="utf-8"?>
        <svg class='select__icon' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
			<path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/>
			</svg>
    </div>
    <p class="text-input__helper"></p>
</div>


<!-- Small -->
<div class="select__wrapper">
    <div class="text-input__pre">
        <label class="text-input__label" for="country">Country</label>
    </div>
    <div class="select text-input__inner select-small">
        <select>
			<option>United States</option>
			<option>Canada</option>
			<option>New Jersey</option>
		</select>
        <?xml version="1.0" encoding="utf-8"?>
        <svg class='select__icon' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
			<path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/>
			</svg>
    </div>
    <p class="text-input__helper"></p>
</div>


<!-- Simple -->
<div class="select__wrapper">
    <div class="select text-input__inner select-simple">
        <select>
			<option>United States</option>
			<option>Canada</option>
			<option>New Jersey</option>
		</select>
    </div>
    <p class="text-input__helper"></p>
</div>


<div class="select__wrapper">
	{{#if label}}
		{{> @input-pre }}
	{{/if}}
	<div class="select text-input__inner {{class}}">
		<select>
			{{#each options}}
			<option>{{ this }}</option>
			{{/each}}
		</select>
		{{#unless isSimple}}
			{{> @icon icon=icon class="select__icon"}}
		{{/unless}}
	</div>
	{{> @input-helper}}
</div>
 
/* Default */
{
  "id": "country",
  "name": "country",
  "label": "Country",
  "icon": "<path d=\"M7 10l5 5 5-5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>",
  "options": [
    "United States",
    "Canada",
    "New Jersey"
  ]
}


/* Small */
{
  "id": "country",
  "name": "country",
  "label": "Country",
  "icon": "<path d=\"M7 10l5 5 5-5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>",
  "options": [
    "United States",
    "Canada",
    "New Jersey"
  ],
  "class": "select-small"
}


/* Simple */
{
  "id": "country",
  "name": "country",
  "label": null,
  "icon": "<path d=\"M7 10l5 5 5-5z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>",
  "options": [
    "United States",
    "Canada",
    "New Jersey"
  ],
  "class": "select-simple",
  "isSimple": true
}

Select

A Select allows the user to make a single selection from a short list of options.

When to use:

Use a Select when a user must make a singular choice from a short list of possible choices.

When not to use:

  • Many options; if there are many options, instead use an Autosuggest.
  • Multiple selections; if a user can select multiple options, instead use Checkboxes, or TBD — some variation of Autosuggest.