Bootstrap 5Forms

Bootstrap 5 Form Select

Q: How do I make a Form Select required and show a validation message?

Add the required attribute to the element and wrap your form in a tag with the needs-validation class. On submit, add the was-validated class to the form via JavaScript. Bootstrap will then apply red border styling and display the content inside a sibling automatically. Make sure your placeholder option has an empty value (value="") so the browser treats an unselected state as invalid.

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.

Bootstrap class

.form-select

Common 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 and classes

Variant	Description and classes	Classes
Default select	Styled single-choice dropdown that matches other form controls.`form-select`	`form-select`
Sizes	Larger or smaller select to line up with neighbouring inputs.`form-select form-select-lg / form-select-sm`	`form-select form-select-lg / form-select-sm`
Multiple select	List box that allows several choices; add size to show more rows.`form-select + multiple attribute`	`form-select + multiple attribute`
Disabled	Greyed-out select that cannot be changed.`form-select + disabled attribute`	`form-select + disabled attribute`
Floating label	Label sits inside the select and moves up when a value is chosen.`form-floating + form-select`	`form-floating + form-select`

Code example

HTML

<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

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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 form-select-sm or form-select-lg alongside form-select 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 <label> with a matching for/id pair so screen readers announce the field purpose correctly, and set the placeholder <option> as both selected and disabled to prevent it being re-selected.

Enable multiple selections with the multiple attribute

Adding the multiple attribute transforms the control into a multi-select list box. Combine it with size="4" 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 is-valid or is-invalid to the form-select element and follow it with a <div class="invalid-feedback"> element. Bootstrap will automatically show or hide the message based on validation state, keeping your error UX consistent with other form controls.

FAQ

How do I make a Form Select required and show a validation message?

Add the required attribute to the <select> element and wrap your form in a tag with the needs-validation class. On submit, add the was-validated class to the form via JavaScript. Bootstrap will then apply red border styling and display the content inside a sibling <div class="invalid-feedback"> automatically. Make sure your placeholder option has an empty value (value="") so the browser treats an unselected state as invalid.

Can I customise the arrow icon or colours of the Form Select?

Yes. Bootstrap injects the dropdown chevron as an SVG background image via the --bs-form-select-bg-img CSS custom property. You can override it in your stylesheet: set --bs-form-select-bg-img: url("your-icon.svg") on .form-select. For border and focus colours, override --bs-border-color and the focus box-shadow using .form-select:focus { border-color: #yourColor; box-shadow: 0 0 0 0.25rem rgba(r,g,b,.25); }. If you're using Sass, adjusting the $form-select-border-color and $form-select-focus-border-color variables before importing Bootstrap gives you the cleanest result.

How does Canvas Builder handle Form Select components?

Canvas Builder detects select field requirements from your form schema and emits fully structured <select class="form-select"> markup with the correct label, id, and aria attributes wired up automatically. It respects your project's brand token configuration, injecting custom focus colours and border radii via CSS variables so the output matches your design system without any manual overrides.