Forms

Select

A styled select with search and multiple choice. It is built on a real <select>, so forms and labels keep working.

Single

Plan

HTML

<label class="pw-label" for="demo-plan">Plan</label>
<select id="demo-plan" name="plan" data-pw-select>
  <option value="">Choose a plan</option>
  <option value="free">Free</option>
  <option value="team" selected>Team</option>
  <option value="business">Business</option>
  <option value="enterprise" disabled>Enterprise (ask us)</option>
</select>

With search and a clear button

Country

HTML

<label class="pw-label" for="demo-country">Country</label>
<select id="demo-country" name="country" data-pw-select data-search data-clear>
  <option value="">Choose a country</option>
  <optgroup label="Europe">
    <option>Austria</option><option>Belgium</option><option>Denmark</option><option>Finland</option><option>France</option>
    <option>Germany</option><option>Ireland</option><option>Italy</option><option>Netherlands</option><option>Norway</option>
    <option>Poland</option><option>Portugal</option><option>Spain</option><option>Sweden</option><option>Switzerland</option>
  </optgroup>
  <optgroup label="Americas">
    <option>Argentina</option><option>Brazil</option><option>Canada</option><option>Chile</option><option>Mexico</option><option>United States</option>
  </optgroup>
  <optgroup label="Asia and Pacific">
    <option>Australia</option><option>India</option><option>Indonesia</option><option>Japan</option><option>New Zealand</option><option>Pakistan</option><option>Singapore</option><option>South Korea</option>
  </optgroup>
</select>

Multiple

Add the multiple attribute. data-max limits the number of choices.

Skills (up to 3)

HTML

<label class="pw-label" for="demo-skills">Skills (up to 3)</label>
<select id="demo-skills" name="skills" multiple data-pw-select data-search data-max="3" data-placeholder="Choose skills">
  <option selected>HTML</option>
  <option selected>CSS</option>
  <option>JavaScript</option>
  <option>PHP</option>
  <option>Python</option>
  <option>SQL</option>
</select>
<p class="demo-out" id="demo-skills-out"></p>

JavaScript

document.getElementById('demo-skills').addEventListener('change', function (e) {
  var chosen = Array.prototype.filter.call(e.target.options, function (o) { return o.selected; }).map(function (o) { return o.value; });
  document.getElementById('demo-skills-out').textContent = 'Value: ' + (chosen.join(', ') || 'nothing');
});

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-search`		A search field above the options.
`data-clear`		A button that empties the choice.
`data-placeholder`		Text when nothing is chosen. Without it, the text of an empty first option.
`data-empty`	`No matches`	Text when the search finds nothing.
`data-max`		With `multiple`: the most options that can be chosen.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`change`	The normal event of the `<select>`. Read its value as you always do.
`pw:open, pw:close`	On the `<select>`.

From your script

var s = Partwise.get('#demo-plan', 'select');
s.value;               // 'team', or a list for multiple
s.value = 'business';
s.refresh();           // after you add or remove <option> elements
s.open(); s.close();

Keyboard

Key	Action
`Enter` `Space` `Down`	Open the list
`Down` `Up`	Next and previous option
`Home` `End`	First and last option
`A-Z`	Jump to an option, or type in the search field
`Enter`	Choose
`Esc`	Close
`Backspace`	With multiple: remove the last choice

Good to know

Without JavaScript people get the normal browser select.
A click on the <label> moves the focus to the select, as with a native one.
required works with the form validation and with the browser check.
Options and option groups that are disabled stay disabled.
It lists the options that are in the page. It does not load options from a server while you type.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/20-select.css, js/20-select.js, css/01-basics.css (chips).