<

Voyager
Voyager

Select

Selects are form controls that allow users to make a single choice from a list of options.

Usage notes

  • Use for lists with more than 5 items
  • List items alphabetically or in some other logical order
  • Provide a clear label indentifying the contents of the select menu
  • Have a default selection where possible
HTML Copy 

<div class="form-group">
    <label for="select-1">Select Label</label>
    <select id="select-1" class="form-control">
        <option>Choose an option</option>
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</div>

Variants

Disabled

Add a disabled attribute to the select to diable making a selection or making changes to the current selected option. Add a disabled attribute to an option to prevent its selection.

Error

To indicate an error state, add .has-error to the parent element of the select.

Error message

Placeholder

To create placeholder text for a select control, add an option with the placeholder text and add disabled and selected attributes to it.

With Option Groups

Options can be grouped and labeled with optgroup.

HTML Copy 

<div class="form-group">
    <label for="optiongroup-1">Select Label</label>
    <select id="optiongroup-1" class="form-control">
        <optgroup label="Numbers">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        </optgroup>
        <optgroup label="Letters">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        </optgroup>
    </select>
</div>