Native Select

Role

<div class="field">
  <label class="label" for="select-role">Role</label>
  <select class="native-select" id="select-role">
    <option>Developer</option>
    <option>Designer</option>
    <option>Product</option>
  </select>
</div>

Usage

<select class="native-select">
  <option>Developer</option>
  <option>Designer</option>
</select>

Composition

Environment

Deploys go to the selected environment.

<div class="field">
  <label class="label" for="select-composition">Environment</label>
  <select class="native-select" id="select-composition">
    <option value="">Choose one</option>
    <option value="dev">Development</option>
    <option value="staging">Staging</option>
    <option value="prod">Production</option>
  </select>
  <p class="field-description">Deploys go to the selected environment.</p>
</div>

The class resets the platform arrow and draws its own on the trailing edge, so the control matches the inputs beside it. Everything else is the browser’s.

Attribute	Meaning
`data-size="sm"`	The shorter height, to match `.btn-sm`
`multiple`	Grows into a list box; give it a height

Groups

<select class="native-select" aria-label="City">
  <optgroup label="Europe">
    <option>Lisbon</option>
    <option>Berlin</option>
  </optgroup>
  <optgroup label="South America">
    <option>Porto Alegre</option>
    <option>São Paulo</option>
  </optgroup>
</select>

Disabled

Region

Invalid

Plan

Pick a plan to continue.

<div class="field" data-invalid>
  <label class="label" for="select-invalid">Plan</label>
  <select class="native-select" id="select-invalid" aria-invalid="true"
          aria-describedby="select-invalid-error">
    <option value="">Choose one</option>
    <option>Free</option>
  </select>
  <p class="field-error" id="select-invalid-error">Pick a plan to continue.</p>
</div>

Multiple

Native Select vs Select

There is no custom select in partialkit, and that is deliberate for now.

	Native select	A custom listbox
Keyboard, type-ahead, screen reader	From the platform	You implement all of it
Mobile	The system picker, which users already know	A panel you have to make work on touch
Option content	Text only	Anything
Styling of the open list	Barely	Complete
Submits in a plain form	Yes	Needs a hidden input

Reach for the native one unless you need rich option content — icons, avatars, two lines of text. The custom version costs a lot of behaviour to rebuild, and rebuilding it badly is worse than a plain select.

RTL

Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading direction on their own. See the button page for a live example.

Accessibility

A select needs a name like any control. When there is no visible label, use aria-label.

An empty first option is how you say “nothing chosen yet” — <option value="">Choose one</option> — so required can actually reject it. There is no placeholder attribute on a select.