Bootstrap 5 Select Menus
Creating dropdown selection menus with Bootstrap
📋 What are Select Menus?
Bootstrap Select Menus are dropdown lists that let users choose from multiple options. Using the form-select class, you can create styled select elements with consistent appearance, sizing options, and support for multiple selections and disabled states.
<!-- Basic select menu -->
<select class="form-select">
<option selected>Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Output:
Select Menu Features
Sizing
Small, default, and large sizes
<select class="form-select form-select-lg">Multiple
Select multiple options
<select class="form-select" multiple>Disabled
Disable select menus
<select class="form-select" disabled>Grouped Options
Organize with optgroup
<optgroup label="Group">🔹 Basic Select Menu
Basic select menus, styled with `form-select`, create standard dropdowns for single-option selection, with consistent arrows, padding, and borders across browsers. The first option often serves as a placeholder like "Choose an option," guiding user interaction. Select menus are fundamental for forms requiring predetermined choices, such as country selection, category picks, or menu navigation. Bootstrap's styling ensures accessibility, responsive behavior, and visual harmony with other form controls, making them a reliable choice for diverse web applications.
<div class="mb-3">
<label for="country" class="form-label">Select Country</label>
<select class="form-select" id="country">
<option selected>Choose a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
<option value="au">Australia</option>
</select>
</div>Output:
🔹 Select Menu Sizing
Select menu sizing with `form-select-lg` or `form-select-sm` adjusts dropdown dimensions to match surrounding UI elements, improving visual consistency and touch targets. Larger selects enhance usability on mobile devices, while smaller ones fit compact layouts like tables or toolbars. Consistent sizing across forms creates a professional, polished appearance and supports responsive design principles. This flexibility allows developers to tailor select menus to specific contexts, ensuring optimal user experience whether in spacious forms or dense interface sections.
<!-- Large select -->
<select class="form-select form-select-lg mb-3">
<option selected>Large select menu</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<!-- Default select -->
<select class="form-select mb-3">
<option selected>Default select menu</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<!-- Small select -->
<select class="form-select form-select-sm">
<option selected>Small select menu</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>Output:
🔹 Multiple Select
Multiple select menus allow users to choose several options simultaneously by holding Ctrl/Cmd, displaying a scrollable list box instead of a dropdown. This is ideal for selecting multiple categories, tags, or preferences where checkboxes would occupy excessive space. The `multiple` attribute transforms the select behavior, supporting bulk selection in a compact component. Proper implementation includes clear instructions and visual feedback, enhancing usability for tasks like filtering, batch editing, or multi-criteria selection in admin panels or search interfaces.
<div class="mb-3">
<label for="skills" class="form-label">Select Skills (Hold Ctrl to select multiple)</label>
<select class="form-select" id="skills" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="react">React</option>
<option value="node">Node.js</option>
<option value="python">Python</option>
</select>
</div>Output:
🔹 Disabled Select Menu
Disabled select menus prevent user interaction, appearing grayed out to indicate unavailable options or conditional field logic. This is useful for displaying fixed values, inactive features, or choices that become available only after certain conditions are met. Disabled selects maintain form structure and visual continuity while preventing invalid submissions. Including explanatory text or tooltips helps users understand why the select is disabled, improving transparency and reducing potential confusion in multi-step or conditional forms.
<select class="form-select" disabled>
<option selected>This select is disabled</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>Output:
🔹 Grouped Options
Grouped options organize select menu items into categories using `optgroup` elements with descriptive `label` attributes, improving navigation in long lists. This creates visual separators and logical groupings, making dropdowns easier to scan and use. Common applications include country lists grouped by continent, product categories with subcategories, or menu sections in large applications. Grouping enhances usability, reduces selection time, and supports better information architecture in complex forms, contributing to a more efficient and user-friendly interface.
<div class="mb-3">
<label for="food" class="form-label">Select Food</label>
<select class="form-select" id="food">
<option selected>Choose your favorite food</option>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</optgroup>
<optgroup label="Vegetables">
<option value="carrot">Carrot</option>
<option value="broccoli">Broccoli</option>
<option value="spinach">Spinach</option>
</optgroup>
</select>
</div>Output:
🔹 Select with Validation
Select menus with validation feedback use `is-valid` or `is-invalid` classes alongside corresponding message divs to indicate correct or erroneous selections. This immediate feedback guides users toward valid choices, reducing form submission errors and improving data quality. Green borders and checkmarks confirm proper selections, while red borders and error texts highlight issues. Integrating validation with selects ensures consistent user experience across all form control types, enhancing form reliability and professional appearance in critical data entry scenarios.
<!-- Valid select -->
<div class="mb-3">
<label for="validSelect" class="form-label">Valid Select</label>
<select class="form-select is-valid" id="validSelect">
<option selected value="1">Valid option selected</option>
<option value="2">Option 2</option>
</select>
<div class="valid-feedback">
Great choice!
</div>
</div>
<!-- Invalid select -->
<div class="mb-3">
<label for="invalidSelect" class="form-label">Invalid Select</label>
<select class="form-select is-invalid" id="invalidSelect">
<option selected value="">Choose...</option>
<option value="1">Option 1</option>
</select>
<div class="invalid-feedback">
Please select a valid option.
</div>
</div>