Bootstrap 5 Form Select
The Bootstrap 5 Form Select component is a styled dropdown input element that lets users choose one or more options from a predefined list. It replaces the browser's default <select> styling with a consistent, accessible control that integrates seamlessly with Bootstrap forms. Use it whenever you need to present a bounded set of choices — such as countries, categories, or quantities — where free-text input isn't appropriate.
Primary Class
.form-selectCommon Use Cases
- →Letting users choose their country or region during a checkout or registration flow
- →Filtering a product catalogue by category, price range, or availability on an e-commerce listing page
- →Selecting a ticket type (e.g. Adult, Child, Senior) on an event booking form
- →Choosing a preferred contact method (Email, Phone, WhatsApp) on a customer support request form
Variants & Classes
| Variant | Description |
|---|---|
| Form Select Default | Standard form select with Bootstrap's default styling. |
| Form Select Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<div class="mb-3">
<label for="ticketType" class="form-label">Ticket Type</label>
<select class="form-select" id="ticketType" aria-label="Select ticket type">
<option selected disabled>Choose a ticket type...</option>
<option value="adult">Adult — £25.00</option>
<option value="student">Student — £15.00</option>
<option value="child">Child (under 12) — £10.00</option>
<option value="senior">Senior (60+) — £12.00</option>
<option value="family">Family Pass (2 adults + 2 children) — £55.00</option>
</select>
<div class="form-text">Prices include VAT. Concession proof may be required at the gate.</div>
</div>Live Examples
Basic Form Select
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated form select with custom colours
- ✓Form Select with interactive states
- ✓Responsive form select for all screen sizes
Best Practices
Use size variants to match your form density
Add <code>form-select-sm</code> or <code>form-select-lg</code> alongside <code>form-select</code> to match the size of adjacent inputs — this keeps inline forms and compact filter bars visually consistent without custom CSS.
Always pair selects with a visible label
Never rely solely on a placeholder option for context. Use a <code><label></code> with a matching <code>for</code>/id pair so screen readers announce the field purpose correctly, and set the placeholder <code><option></code> as both <code>selected</code> and <code>disabled</code> to prevent it being re-selected.
Enable multiple selections with the multiple attribute
Adding the <code>multiple</code> attribute transforms the control into a multi-select list box — combine it with <code>size="4"</code> to control how many rows are visible without scrolling, which is especially useful for tag or interest selection fields.
Validate selects with Bootstrap's built-in feedback classes
Apply <code>is-valid</code> or <code>is-invalid</code> to the <code>form-select</code> element and follow it with a <code><div class="invalid-feedback"></code> element — Bootstrap will automatically show or hide the message based on validation state, keeping your error UX consistent with other form controls.