How to create a listbox in HTML without allowing multiple selection?

html

responsive-design

best-practices

accessibility

byAlex Kataev·Aug 23, 2024

Get your single-selection listbox on the roll using the <select> HTML tag and put the <option> tags inside it to list the choices, as follows:

<select name="choices">
  <option value="1">Choice 1</option>
  <option value="2">Choice 2</option>
  <option value="3">Choice 3</option>
</select>

Your listbox will then bless the user with the divine rights of singular power of choice.

Adding size for ample view

Want to display more options at once? Sounds like a party! Introduce the size attribute to your listbox:

<!-- Listbox decides to throw a party -->
<select name="choices" size="5">
  <!-- Friends (options) join the party -->
</select>

Setting size="5" turns your listbox into a cute little scrollable party offering up to 5 visible options at any time!

Unlocking the secrets of the `<select>` tag

The humble <select> tag is the unsung hero behind our listbox. Let's unravel some of its mystical powers for your benefit!

First impressions matter - placeholder

Setting up a placeholder adds a hint of charm:

<select name="choices">
  <option value="" disabled selected>Pick one. Be brave.</option>
  <!-- Add other options after this -->
</select>

Disabled and selected on the placeholder option ensures it teases users initially but doesn't interfere later on.

Dress up your listbox - CSS classes

Fancy up your listbox with CSS classes .chosen-select or .form-control.

<select name="choices" class="chosen-select form-control">
  <!-- List of options go here -->
</select>

Setting up a class-style catwalk is a seamless way to maintain a consistent look and vibe across your application.

The Asp.Net MVC dance

If you're jiving in the Asp.Net MVC world, @Html.ListBox or @Html.ListBoxFor will whip up your single-select listbox:

// Asp.Net says hello
@Html.ListBoxFor(model => model.Choice, new SelectList(Model.Choices))

Just take care not to invite 'multiple', the swagger-stealing attribute over to your MVC party!

Potential pitfalls and how to overcome them

Line dancing with listboxes could sometimes stumble. Keep an eye out for these potential roadblocks:

Keep it friendly - accessibility

Ensure your listbox speaks fluently to screen readers. Label options well and indicate the single-selection nature clearly.

Presetting the choice

Want an option to be chosen by default on page load? Use the selected attribute on the option:

<select name="choices">
  <!-- Default choice feels special -->
  <option value="2" selected>Default guy. Everyone's friend!</option>
  <!-- Other guests (options) -->
</select>