Heartwood

Select: 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>
 
{
  "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.