Select components can be used for collecting user provided information from a list of given options.

Overview #

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).

<!-- Select component -->
<div class="mb-3">
  <label for="example-select-1" class="form-label">Area of specialization</label>
  <select class="form-select" id="example-select-1">
    <option selected>Select an option</option>
    <option value="frontend">Front-end</option>
    <option value="backend">Back-end</option>
    <option value="fullstack">Full-stack</option>

<!-- Multi-select box -->
  <label for="example-select-2" class="form-label">Select languages</label>
  <select class="form-select" id="example-select-2" multiple>
    <option value="python">Python</option>
    <option value="ruby">Ruby</option>
    <option value="javascript">JavaScript</option>
    <option value="typescript">TypeScript</option>

Sizing #

Create small and large select components with the .form-select-sm and .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>

Disabled #

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>
Up next
Checkbox and radio

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.