Select
Select boxes can be used to create dropdown lists, allowing users to choose one or more option(s). They can be styled using the .form-control class. Multi-select boxes can be created using the multiple="..." attribute.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
<!-- Select box -->
<select class="form-control" id="select-1">
<option value="" selected="selected" disabled="disabled">Select a color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<!-- Multi-select box -->
<label for="multi-select-1">Select one or more colors</label>
<select class="form-control" id="multi-select-1" multiple="multiple" size="3">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>For the single select box, the very first <option> element with the value="", selected="selected", and disabled="disabled" attributes works like a placeholder. For the multi-select box, the size="..." attribute is not required, but it specifies the number of visible options. It is highly recommended to always use labels with multi-select boxes, because without them, they have no context on mobile phones and tablets.
Select boxes with the class .form-control will take up the full width of the parent container and have no margins (margin: 0) by default. All the select boxes on this page are placed inside containers with a width of 40rem (400px), and a maximum width of 100%. They are also styled to have a margin on the bottom using a utility class. None of this is shown in the code for the sake of conciseness. We recommend using a wrapper with the class .form-group inside forms. This will provide a margin between the elements. See the example here (opens in new tab).
Sizing #
Different sizes of select boxes are also available:
- Large select boxes can be created by adding the .form-control-lg class.
- Small select boxes can be created by adding the .form-control-sm class.
<!-- Large select box -->
<select class="form-control form-control-lg" id="select-2">
<option value="" selected="selected" disabled="disabled">Select an animal (Large)</option>
<option value="elephant">Elephant</option>
<option value="whale">Whale</option>
<option value="dinosaur">Dinosaur</option>
</select>
<!-- Regular select box -->
<select class="form-control" id="select-3">
<option value="" selected="selected" disabled="disabled">Select an animal (Regular)</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="cow">Cow</option>
</select>
<!-- Small select box -->
<select class="form-control form-control-sm" id="select-4">
<option value="" selected="selected" disabled="disabled">Select an animal (Small)</option>
<option value="mouse">Mouse</option>
<option value="hedgehog">Hedgehog</option>
<option value="chicken">Chicken</option>
</select><!-- Large multi-select box -->
<label for="multi-select-2">Select one or more animals (Large)</label>
<select class="form-control form-control-lg" id="multi-select-2" multiple="multiple" size="3">
<option value="elephant">Elephant</option>
<option value="whale">Whale</option>
<option value="dinosaur">Dinosaur</option>
</select>
<!-- Regular multi-select box -->
<label for="multi-select-3">Select one or more animals (Regular)</label>
<select class="form-control" id="multi-select-3" multiple="multiple" size="3">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="cow">Cow</option>
</select>
<!-- Small multi-select box -->
<label for="multi-select-4">Select one or more animals (Small)</label>
<select class="form-control form-control-sm" id="multi-select-4" multiple="multiple" size="3">
<option value="mouse">Mouse</option>
<option value="hedgehog">Hedgehog</option>
<option value="chicken">Chicken</option>
</select>Disabled select boxes #
Select boxes can be disabled by adding the disabled="..." attribute to them.
<!-- Disabled select box -->
<select class="form-control" id="select-5" disabled="disabled">
<option value="" selected="selected" disabled="disabled">Select an option</option>
<option value="option-1">Option 1</option>
<option value="option-2" selected="selected">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<!-- Disabled multi-select box -->
<select class="form-control" id="multi-select-5" multiple="multiple" size="3" disabled="disabled">
<option value="option-1">Option 1</option>
<option value="option-2" selected="selected">Option 2</option>
<option value="option-3">Option 3</option>
</select>Invalid select boxes #
Adding the class .is-invalid to a select box provides a visual cue to the users that the provided choice (or the lack of one) is invalid. This can also be achieved by adding the .is-invalid class to a parent container with the .form-group class.
<!-- Invalid select box -->
<select class="form-control is-invalid" id="select-6">
<option value="" selected="selected" disabled="disabled">Select an option (required)</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<!-- Invalid select box through parent container -->
<div class="form-group is-invalid">
<select class="form-control" id="select-7">
<option value="" disabled="disabled">Select an option other than 2</option>
<option value="option-1">Option 1</option>
<option value="option-2" selected="selected">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div><!-- Invalid mult-select box -->
<label for="multi-select-6" class="required">Select at least one option</label>
<select class="form-control is-invalid" id="multi-select-6" multiple="multiple" size="3">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<!-- Invalid mult-select box through parent container -->
<div class="form-group is-invalid">
<label for="multi-select-7">Select one or more options other than 2</label>
<select class="form-control" id="multi-select-7" multiple="multiple" size="3">
<option value="option-1">Option 1</option>
<option value="option-2" selected="selected">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div>You can check out the example here (opens in new tab) to see how error messages can be combined with invalid form-controls. It should be noted that while the example uses <input> elements and not <select> elements, the same concepts can be easily applied with select boxes.
Alternate in dark mode #
Select boxes with the class .alt-dm will have an alternate appearance in dark mode. Their appearance will be unchanged in light mode.
<!-- Select box, alternate in dark mode (unchanged in light mode) -->
<select class="form-control alt-dm" id="select-8">
<option value="" selected="selected" disabled="disabled">Select an option (Alt. in dark mode)</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<!-- Multi-select box, alternate in dark mode (unchanged in light mode) -->
<label for="multi-select-8">Select one or more options (Alt. in dark mode)</label>
<select class="form-control alt-dm" id="multi-select-8" multiple="multiple" size="3">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>These select boxes are designed to look good and be usable on the colorful backgrounds in dark mode. You can check out the example here (opens in new tab) to get a better idea. Once again, it should be noted that while the example uses <input> elements and not <select> elements, the same concepts can be easily applied with select boxes.
Up next:
Textarea
Help us grow
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
Gold sponsor
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
Sponsors
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor image placeholder
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
Backers
The following people have generously decided to support Halfmoon.
- Ethan Fann
- Julia Koblitz
- Benjamin Listwon
- Sean Lindsay
- Daan
Become a backer on Patreon .
Subscribe for updates
- We will notify you when the framework gets a substantial update. No spam or marketing.
- You can also follow us on Twitter and stay updated that way.
