Forms
Native selects
Style accessible native selects, option groups, disabled states, and compact or large controls.
Forms
Native selects
The .bs-select class preserves native selection behavior while applying the framework’s control surface, focus ring, sizing, and arrow.
Basic select
HTML · Basic select
<div class="bs-form-group">
<label class="bs-label" for="role">Team role</label>
<select class="bs-select" id="role" name="role" required>
<option value="">Choose a role</option>
<option value="designer">Designer</option>
<option value="engineer">Engineer</option>
<option value="product-manager">Product manager</option>
</select>
</div>Option groups
HTML · Option groups
<select class="bs-select" aria-label="Deployment region">
<optgroup label="North America"><option value="us-east">US East</option><option value="us-west">US West</option></optgroup>
<optgroup label="Europe"><option value="eu-central">EU Central</option><option value="eu-west">EU West</option></optgroup>
</select>Select sizes
HTML · Select sizes
<select class="bs-select bs-select-sm" aria-label="Small select"><option>Compact</option></select>
<select class="bs-select" aria-label="Default select"><option>Default</option></select>
<select class="bs-select bs-select-lg" aria-label="Large select"><option>Prominent</option></select>Disabled select
HTML · Disabled select
<label class="bs-label" for="region">Region</label>
<select class="bs-select" id="region" disabled><option>Unavailable</option></select>Prefer native when possible: use a native select when users choose from a manageable fixed list. It works without JavaScript and inherits platform keyboard, touch, screen-reader, and form-submission behavior.