How to Create a Select Input in Alpine.js

I didn’t find a working example of how to create an HTML select input in Alpine.js online, so I’m presenting it here.

Select Input in Alpine.js

Basically, you create a “for” loop to generate the option values. One of the keys to making this work with stored values is to set the “:selected” property to true when the option is equal to the selection option value.

<div x-data="{ selected_option: '', 
 options: [ 
  'apples',
  'oranges', 
  'lemons'
]}">

 <label>My Select:
  <select x-model="selected_option">
   <option value=""> - Select - </option>
    <template x-for="option in options" :key="option">
     <option :value="option" x-text="option" :selected="option==selected_option"></option>
    </template>
   </select>
  </label>
</div>

Let me know how this worked for you in the comments! – Brian

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com