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>Valid select
Shipping is available for your country.
HTML · Valid select
<div class="bs-form-group">
<label class="bs-label" for="country">Country</label>
<select class="bs-select bs-is-valid" id="country" name="country" aria-invalid="false" aria-describedby="country-feedback">
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
<option value="us" selected>United States</option>
</select>
<span class="bs-form-feedback bs-form-feedback-valid" id="country-feedback">Shipping is available for your country.</span>
</div>Invalid select
Please choose a valid subscription plan.
HTML · Invalid select
<div class="bs-form-group">
<label class="bs-label" for="plan">Subscription plan</label>
<select class="bs-select" id="plan" name="plan" aria-invalid="true" aria-describedby="plan-feedback" required>
<option value="">Choose a plan...</option>
<option value="starter">Starter</option>
<option value="pro">Pro</option>
</select>
<span class="bs-form-feedback bs-form-feedback-invalid" id="plan-feedback">Please choose a valid subscription plan.</span>
</div>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.
Native Selects API
Native select classes provide consistent framework theming, sizing, arrow styling, and validation feedback.
| Class | Purpose |
|---|---|
.bs-select | Styles native select dropdowns with custom chevron arrows, background tokens, and focus rings. |
.bs-select-sm | Compact select sizing (2.25rem height) for dense toolbars and compact filter bars. |
.bs-select-lg | Large select sizing (3.25rem height) for hero forms and primary conversion steps. |
.bs-is-valid | Explicit positive validation state with green border, focus ring, and icon accent. |
.bs-is-invalid | Explicit negative validation state with danger border, focus ring, and icon accent. |
.bs-form-group | Vertical grid layout binding label, select element, and feedback messages. |
.bs-label | Associated field label for native select controls. |
.bs-form-feedback-valid | Success message text associated with valid select choices. |
.bs-form-feedback-invalid | Error message text describing missing or invalid select options. |