Select components can be used for collecting user provided information from a list of given options.
You can create a select component by adding the
.form-select class to a
<select> element. Multi-select boxes can be created using the
multiple attribute. You can read more about this element on MDN:
<select> (opens in new tab).
InformationPlease note, all select components are block-level and they will take up the full width of the parent container. In the example above (and all others on this page), the select components have been placed inside a container with the class
Create small and large select components with the
.form-select-lg classes respectively. You can also use the
size attribute on multi-select boxes.
<!-- Small select --> <select class="form-select form-select-sm" aria-label="Small select example">...</select> <!-- Large select --> <select class="form-select form-select-lg" aria-label="Large select example">...</select> <!-- Multi-select with size 3 --> <select class="form-select rounded-end-0" multiple size="3" aria-label="Multi-select size 3">...</select>
AccessibilityNote how in the above example, because we did not have any
<label>elements, we used the
aria-labelattribute to label the select components for assistive technologies.
Disable a select component by adding the
disabled attribute. This will change the appearance of the input, remove pointer events, and prevent focusing.
<!-- Disabled select --> <label for="example-select-3" class="form-label">Disabled select</label> <select class="form-select" id="example-select-3" disabled> <option value="one">Option one</option> <option value="two" selected>Option two</option> <option value="three">Option three</option> </select>
Help us grow
Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.
You can email us directly if you have any queries. We are always happy to answer.
Subscribe for updates
We will notify you when the framework gets a substantial update. No spam ever.
Follow us on Twitter so that you can stay updated that way.