Select

Displays a list of options for the user to pick from—triggered by a button.

Usage

The custom select component is a web component built from scratch to enhance the native <select> tag. To get started, simply use the <uk-select> markup in your HTML code.

<uk-select uk-cloak>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
  <option value="option5">Option 5</option>
</uk-select>

Note Similar to the standard <select> tag, if you don’t specify a value attribute for an <option> tag, it will default to using its text content as the value instead.

Adding header

To add a header to your custom select component, use the <optgroup> tag, which will be automatically converted into a dropdown header, providing a seamless developer experience.

<uk-select name="fruit" uk-cloak>
  <optgroup label="Letter A">
    <option value="apple">Apple</option>
    <option value="apricot">Apricot</option>
    <option value="avocado">Avocado</option>
    <option value="ackee">Ackee</option>
    <option value="asian_pear">Asian Pear</option>
    <option value="abiu">Abiu</option>
    <option value="ambarella">Ambarella</option>
  </optgroup>

  <optgroup label="Letter B">
    <option value="banana">Banana</option>
    <option value="blackberry">Blackberry</option>
    <option value="blueberry">Blueberry</option>
    <option value="boysenberry">Boysenberry</option>
    <option value="breadfruit">Breadfruit</option>
    <option value="bilberry">Bilberry</option>
    <option value="bael">Bael</option>
    <option value="black_sapote">Black Sapote</option>
  </optgroup>

  <optgroup label="Letter C">
    <option value="cherry">Cherry</option>
    <option value="coconut">Coconut</option>
    <option value="cranberry">Cranberry</option>
    <option value="cantaloupe">Cantaloupe</option>
    <option value="clementine">Clementine</option>
    <option value="cactus_pear">Cactus Pear</option>
    <option value="cherimoya">Cherimoya</option>
    <option value="cloudberry">Cloudberry</option>
    <option value="calamansi">Calamansi</option>
  </optgroup>

  <optgroup label="Letter D">
    <option value="date">Date</option>
    <option value="dragonfruit">Dragonfruit</option>
    <option value="durian">Durian</option>
    <option value="damson">Damson</option>
    <option value="dewberry">Dewberry</option>
    <option value="duku">Duku</option>
    <option value="dilly">Dilly</option>
  </optgroup>
</uk-select>

Selecting multiple values

To enable the selection of multiple values, simply add the multiple attribute to the <uk-select> element. This will allow users to choose multiple options from the dropdown list.

<uk-select multiple name="programming_language" uk-cloak>
  <option value="python">Python Programming Language</option>
  <option value="javascript">JavaScript Programming Language</option>
  <option value="html">HTML Markup Language</option>
  <option value="css">CSS Styling Language</option>
  <option value="ruby">Ruby Programming Language</option>
  <option value="java">Java Programming Language</option>
  <option value="swift">Swift Programming Language</option>
  <option value="go">Go Programming Language</option>
</uk-select>

Note When utilizing the multiple attribute, note that it will automatically append [] to the name of your input. This is particularly useful when your server expects multiple values, even if the user selects only one option. This ensures that your server-side logic can properly handle the input, regardless of the number of values selected.

Pre-populating values

Similar to the native <select> tag, you can pre-populate values in the custom select component by adding the selected attribute to one or more of your <option> tags. This allows you to set default values for the user.

Select your planet

Select your cars

<div class="space-y-1.5">
  <label class="uk-form-label">Select your planet</label>
  <div class="uk-form-controls">
    <uk-select name="planet" uk-cloak>
      <option>Mars</option>
      <option>Jupiter</option>
      <option>Saturn</option>
      <option selected>Earth</option>
    </uk-select>
  </div>
</div>

<div class="uk-margin space-y-1.5">
  <label class="uk-form-label">Select your cars</label>
  <div class="uk-form-controls">
    <uk-select multiple name="cars" uk-cloak>
      <option selected>Mercedes-Benz</option>
      <option selected>Bentley</option>
      <option>Audi</option>
      <option selected>Porsche</option>
      <option selected>Lamborghini</option>
      <option>Ferrari</option>
    </uk-select>
  </div>
</div>

Disabling options

Similar to the native <select> tag, you can disable specific options in the custom select component by adding the disabled attribute to one or more of your <option> or <optgroup> tags. This allows you to prevent users from selecting certain options.

JavaScript Framework

Disabled options are library and not a framework.

Select fruits

<div class="space-y-1.5">
  <label class="uk-form-label">JavaScript Framework</label>
  <div class="uk-form-controls">
    <uk-select name="js_framework" uk-cloak>
      <option disabled>React</option>
      <option>Angular</option>
      <option>Astro</option>
      <option disabled>Ember.js</option>
      <option disabled>Backbone.js</option>
      <option disabled>jQuery</option>
      <option>Vue</option>
      <option>SvelteKit</option>
    </uk-select>
  </div>
  <p class="uk-form-help">Disabled options are library and not a framework.</p>
</div>
<div class="uk-margin">
  <label class="uk-form-label">Select fruits</label>
  <uk-select multiple name="fruits" uk-cloak>
    <optgroup label="Letter A">
      <option value="apple">Apple</option>
      <option value="apricot">Apricot</option>
      <option value="avocado">Avocado</option>
      <option value="ackee">Ackee</option>
      <option value="asian_pear">Asian Pear</option>
      <option value="abiu">Abiu</option>
      <option value="ambarella">Ambarella</option>
    </optgroup>
    <optgroup label="Letter B" disabled>
      <option value="banana">Banana</option>
      <option value="blackberry">Blackberry</option>
      <option value="blueberry">Blueberry</option>
      <option value="boysenberry">Boysenberry</option>
      <option value="breadfruit">Breadfruit</option>
      <option value="bilberry">Bilberry</option>
      <option value="bael">Bael</option>
      <option value="black_sapote">Black Sapote</option>
    </optgroup>
    <optgroup label="Letter C">
      <option value="cherry">Cherry</option>
      <option value="coconut">Coconut</option>
      <option value="cranberry">Cranberry</option>
      <option value="cantaloupe">Cantaloupe</option>
      <option value="clementine">Clementine</option>
      <option value="cactus_pear">Cactus Pear</option>
      <option value="cherimoya">Cherimoya</option>
      <option value="cloudberry">Cloudberry</option>
      <option value="calamansi">Calamansi</option>
    </optgroup>
    <optgroup label="Letter D" disabled>
      <option value="date">Date</option>
      <option value="dragonfruit">Dragonfruit</option>
      <option value="durian">Durian</option>
      <option value="damson">Damson</option>
      <option value="dewberry">Dewberry</option>
      <option value="duku">Duku</option>
      <option value="dilly">Dilly</option>
    </optgroup>
  </uk-select>
</div>

Combobox

To transform the custom select component into a combobox, simply add the searchable attribute. This will add an input field within the dropdown menu, enabling users to search for specific options. This feature is particularly useful when dealing with extensive lists, such as selecting a country from a long list of options.

<uk-select name="country" placeholder="Select a country" searchable uk-cloak>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Åland Islands">Åland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
  <option value="American Samoa">American Samoa</option>
  <option value="Andorra">Andorra</option>
  <option value="Angola">Angola</option>
  <option value="Anguilla">Anguilla</option>
  <option value="Antarctica">Antarctica</option>
  <option value="Antigua and Barbuda">Antigua and Barbuda</option>
  <option value="Argentina">Argentina</option>
  <option value="Armenia">Armenia</option>
  <option value="Aruba">Aruba</option>
  <option value="Australia">Australia</option>
  <option value="Austria">Austria</option>
  <option value="Azerbaijan">Azerbaijan</option>
  <option value="Bahamas">Bahamas</option>
  <option value="Bahrain">Bahrain</option>
  <option value="Bangladesh">Bangladesh</option>
  <option value="Barbados">Barbados</option>
  <option value="Belarus">Belarus</option>
  <option value="Belgium">Belgium</option>
  <option value="Belize">Belize</option>
  <option value="Benin">Benin</option>
  <option value="Bermuda">Bermuda</option>
  <option value="Bhutan">Bhutan</option>
  <option value="Bolivia">Bolivia</option>
  <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
  <option value="Botswana">Botswana</option>
  <option value="Bouvet Island">Bouvet Island</option>
  <option value="Brazil">Brazil</option>
  <option value="British Indian Ocean Territory">
    British Indian Ocean Territory
  </option>
  <option value="Brunei Darussalam">Brunei Darussalam</option>
  <option value="Bulgaria">Bulgaria</option>
  <option value="Burkina Faso">Burkina Faso</option>
  <option value="Burundi">Burundi</option>
  <option value="Cambodia">Cambodia</option>
  <option value="Cameroon">Cameroon</option>
  <option value="Canada">Canada</option>
  <option value="Cape Verde">Cape Verde</option>
  <option value="Cayman Islands">Cayman Islands</option>
  <option value="Central African Republic">Central African Republic</option>
  <option value="Chad">Chad</option>
  <option value="Chile">Chile</option>
  <option value="China">China</option>
  <option value="Christmas Island">Christmas Island</option>
  <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
  <option value="Colombia">Colombia</option>
  <option value="Comoros">Comoros</option>
  <option value="Congo">Congo</option>
  <option value="Congo, The Democratic Republic of The">
    Congo, The Democratic Republic of The
  </option>
  <option value="Cook Islands">Cook Islands</option>
  <option value="Costa Rica">Costa Rica</option>
  <option value="Cote D'ivoire">Cote D'ivoire</option>
  <option value="Croatia">Croatia</option>
  <option value="Cuba">Cuba</option>
  <option value="Cyprus">Cyprus</option>
  <option value="Czech Republic">Czech Republic</option>
  <option value="Denmark">Denmark</option>
  <option value="Djibouti">Djibouti</option>
  <option value="Dominica">Dominica</option>
  <option value="Dominican Republic">Dominican Republic</option>
  <option value="Ecuador">Ecuador</option>
  <option value="Egypt">Egypt</option>
  <option value="El Salvador">El Salvador</option>
  <option value="Equatorial Guinea">Equatorial Guinea</option>
  <option value="Eritrea">Eritrea</option>
  <option value="Estonia">Estonia</option>
  <option value="Ethiopia">Ethiopia</option>
  <option value="Falkland Islands (Malvinas)">
    Falkland Islands (Malvinas)
  </option>
  <option value="Faroe Islands">Faroe Islands</option>
  <option value="Fiji">Fiji</option>
  <option value="Finland">Finland</option>
  <option value="France">France</option>
  <option value="French Guiana">French Guiana</option>
  <option value="French Polynesia">French Polynesia</option>
  <option value="French Southern Territories">
    French Southern Territories
  </option>
  <option value="Gabon">Gabon</option>
  <option value="Gambia">Gambia</option>
  <option value="Georgia">Georgia</option>
  <option value="Germany">Germany</option>
  <option value="Ghana">Ghana</option>
  <option value="Gibraltar">Gibraltar</option>
  <option value="Greece">Greece</option>
  <option value="Greenland">Greenland</option>
  <option value="Grenada">Grenada</option>
  <option value="Guadeloupe">Guadeloupe</option>
  <option value="Guam">Guam</option>
  <option value="Guatemala">Guatemala</option>
  <option value="Guernsey">Guernsey</option>
  <option value="Guinea">Guinea</option>
  <option value="Guinea-bissau">Guinea-bissau</option>
  <option value="Guyana">Guyana</option>
  <option value="Haiti">Haiti</option>
  <option value="Heard Island and Mcdonald Islands">
    Heard Island and Mcdonald Islands
  </option>
  <option value="Holy See (Vatican City State)">
    Holy See (Vatican City State)
  </option>
  <option value="Honduras">Honduras</option>
  <option value="Hong Kong">Hong Kong</option>
  <option value="Hungary">Hungary</option>
  <option value="Iceland">Iceland</option>
  <option value="India">India</option>
  <option value="Indonesia">Indonesia</option>
  <option value="Iran, Islamic Republic of">Iran, Islamic Republic of</option>
  <option value="Iraq">Iraq</option>
  <option value="Ireland">Ireland</option>
  <option value="Isle of Man">Isle of Man</option>
  <option value="Israel">Israel</option>
  <option value="Italy">Italy</option>
  <option value="Jamaica">Jamaica</option>
  <option value="Japan">Japan</option>
  <option value="Jersey">Jersey</option>
  <option value="Jordan">Jordan</option>
  <option value="Kazakhstan">Kazakhstan</option>
  <option value="Kenya">Kenya</option>
  <option value="Kiribati">Kiribati</option>
  <option value="Korea, Democratic People's Republic of">
    Korea, Democratic People's Republic of
  </option>
  <option value="Korea, Republic of">Korea, Republic of</option>
  <option value="Kuwait">Kuwait</option>
  <option value="Kyrgyzstan">Kyrgyzstan</option>
  <option value="Lao People's Democratic Republic">
    Lao People's Democratic Republic
  </option>
  <option value="Latvia">Latvia</option>
  <option value="Lebanon">Lebanon</option>
  <option value="Lesotho">Lesotho</option>
  <option value="Liberia">Liberia</option>
  <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
  <option value="Liechtenstein">Liechtenstein</option>
  <option value="Lithuania">Lithuania</option>
  <option value="Luxembourg">Luxembourg</option>
  <option value="Macao">Macao</option>
  <option value="Macedonia, The Former Yugoslav Republic of">
    Macedonia, The Former Yugoslav Republic of
  </option>
  <option value="Madagascar">Madagascar</option>
  <option value="Malawi">Malawi</option>
  <option value="Malaysia">Malaysia</option>
  <option value="Maldives">Maldives</option>
  <option value="Mali">Mali</option>
  <option value="Malta">Malta</option>
  <option value="Marshall Islands">Marshall Islands</option>
  <option value="Martinique">Martinique</option>
  <option value="Mauritania">Mauritania</option>
  <option value="Mauritius">Mauritius</option>
  <option value="Mayotte">Mayotte</option>
  <option value="Mexico">Mexico</option>
  <option value="Micronesia, Federated States of">
    Micronesia, Federated States of
  </option>
  <option value="Moldova, Republic of">Moldova, Republic of</option>
  <option value="Monaco">Monaco</option>
  <option value="Mongolia">Mongolia</option>
  <option value="Montenegro">Montenegro</option>
  <option value="Montserrat">Montserrat</option>
  <option value="Morocco">Morocco</option>
  <option value="Mozambique">Mozambique</option>
  <option value="Myanmar">Myanmar</option>
  <option value="Namibia">Namibia</option>
  <option value="Nauru">Nauru</option>
  <option value="Nepal">Nepal</option>
  <option value="Netherlands">Netherlands</option>
  <option value="Netherlands Antilles">Netherlands Antilles</option>
  <option value="New Caledonia">New Caledonia</option>
  <option value="New Zealand">New Zealand</option>
  <option value="Nicaragua">Nicaragua</option>
  <option value="Niger">Niger</option>
  <option value="Nigeria">Nigeria</option>
  <option value="Niue">Niue</option>
  <option value="Norfolk Island">Norfolk Island</option>
  <option value="Northern Mariana Islands">Northern Mariana Islands</option>
  <option value="Norway">Norway</option>
  <option value="Oman">Oman</option>
  <option value="Pakistan">Pakistan</option>
  <option value="Palau">Palau</option>
  <option value="Palestinian Territory, Occupied">
    Palestinian Territory, Occupied
  </option>
  <option value="Panama">Panama</option>
  <option value="Papua New Guinea">Papua New Guinea</option>
  <option value="Paraguay">Paraguay</option>
  <option value="Peru">Peru</option>
  <option value="Philippines">Philippines</option>
  <option value="Pitcairn">Pitcairn</option>
  <option value="Poland">Poland</option>
  <option value="Portugal">Portugal</option>
  <option value="Puerto Rico">Puerto Rico</option>
  <option value="Qatar">Qatar</option>
  <option value="Reunion">Reunion</option>
  <option value="Romania">Romania</option>
  <option value="Russian Federation">Russian Federation</option>
  <option value="Rwanda">Rwanda</option>
  <option value="Saint Helena">Saint Helena</option>
  <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
  <option value="Saint Lucia">Saint Lucia</option>
  <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
  <option value="Saint Vincent and The Grenadines">
    Saint Vincent and The Grenadines
  </option>
  <option value="Samoa">Samoa</option>
  <option value="San Marino">San Marino</option>
  <option value="Sao Tome and Principe">Sao Tome and Principe</option>
  <option value="Saudi Arabia">Saudi Arabia</option>
  <option value="Senegal">Senegal</option>
  <option value="Serbia">Serbia</option>
  <option value="Seychelles">Seychelles</option>
  <option value="Sierra Leone">Sierra Leone</option>
  <option value="Singapore">Singapore</option>
  <option value="Slovakia">Slovakia</option>
  <option value="Slovenia">Slovenia</option>
  <option value="Solomon Islands">Solomon Islands</option>
  <option value="Somalia">Somalia</option>
  <option value="South Africa">South Africa</option>
  <option value="South Georgia and The South Sandwich Islands">
    South Georgia and The South Sandwich Islands
  </option>
  <option value="Spain">Spain</option>
  <option value="Sri Lanka">Sri Lanka</option>
  <option value="Sudan">Sudan</option>
  <option value="Suriname">Suriname</option>
  <option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
  <option value="Swaziland">Swaziland</option>
  <option value="Sweden">Sweden</option>
  <option value="Switzerland">Switzerland</option>
  <option value="Syrian Arab Republic">Syrian Arab Republic</option>
  <option value="Taiwan">Taiwan</option>
  <option value="Tajikistan">Tajikistan</option>
  <option value="Tanzania, United Republic of">
    Tanzania, United Republic of
  </option>
  <option value="Thailand">Thailand</option>
  <option value="Timor-leste">Timor-leste</option>
  <option value="Togo">Togo</option>
  <option value="Tokelau">Tokelau</option>
  <option value="Tonga">Tonga</option>
  <option value="Trinidad and Tobago">Trinidad and Tobago</option>
  <option value="Tunisia">Tunisia</option>
  <option value="Turkey">Turkey</option>
  <option value="Turkmenistan">Turkmenistan</option>
  <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
  <option value="Tuvalu">Tuvalu</option>
  <option value="Uganda">Uganda</option>
  <option value="Ukraine">Ukraine</option>
  <option value="United Arab Emirates">United Arab Emirates</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="United States">United States</option>
  <option value="United States Minor Outlying Islands">
    United States Minor Outlying Islands
  </option>
  <option value="Uruguay">Uruguay</option>
  <option value="Uzbekistan">Uzbekistan</option>
  <option value="Vanuatu">Vanuatu</option>
  <option value="Venezuela">Venezuela</option>
  <option value="Viet Nam">Viet Nam</option>
  <option value="Virgin Islands, British">Virgin Islands, British</option>
  <option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
  <option value="Wallis and Futuna">Wallis and Futuna</option>
  <option value="Western Sahara">Western Sahara</option>
  <option value="Yemen">Yemen</option>
  <option value="Zambia">Zambia</option>
  <option value="Zimbabwe">Zimbabwe</option>
</uk-select>

Disable input

To prevent user input, add the disabled attribute to the <uk-input-select> element. This will disable the custom select, making it impossible for users to enter or modify its value.

<div class="h-9">
  <uk-select name="fruit" disabled uk-cloak>
    <option value="apple">Apple</option>
    <option value="apricot">Apricot</option>
    <option value="avocado" selected>Avocado</option>
    <option value="ackee">Ackee</option>
    <option value="asian_pear">Asian Pear</option>
    <option value="abiu">Abiu</option>
    <option value="ambarella">Ambarella</option>
  </uk-select>
</div>

Error state

The select component is designed to integrate seamlessly with Franken UI and UIkit. To indicate an error state in the form, simply add the error attribute. This will apply a “danger” state to the component, providing visual feedback to the user.

Select an option

This field is required.

<div class="space-y-1.5">
  <label class="uk-form-label uk-text-danger">Select an option</label>
  <div class="uk-form-controls">
    <uk-select error uk-cloak>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
    </uk-select>
  </div>
  <p class="uk-form-help uk-text-danger">This field is required.</p>
</div>

Preventing layout shift

When loading Web Components, a brief delay may cause a flash of unstyled content. To mitigate this, add the uk-cloak attribute to hide the element until JavaScript loads. Setting a predefined height on the parent element can also prevent layout shift for a smoother experience.

<div class="h-9">
  <uk-select uk-cloak>...</uk-select>
</div>

Internationalization

<uk-select
  i18n="selection-count-text: :n: つのオプションが選択されました"
  multiple
  uk-cloak
>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
  <option value="option4">Option 4</option>
  <option value="option5">Option 5</option>
</uk-select>

Available options

Name	Description
`selection-count-text`	Displays a customizable message, e.g. “:n: つのオプションが選択されました”, where :n: is the number of selected options.

Attributes

The following attributes are available for this component:

Name	Type	Default	Description
`name`	String		Specifies the name of the input field.
`multiple`	Boolean	false	Determines whether the component accepts multiple values or not.
`disabled`	Boolean	false	Enables or disables the entire component.
`placeholder`	String		Sets the placeholder text for the component.
`searchable`	Boolean	false	Adds a search input field within the dropdown menu, allowing users to search for specific options.
`error`	Boolean	false	Applies the `uk-form-danger` class when set to `true`, indicating an error state in the form.
`i18n`	String		Enables internationalization. Please see Internationalization for available options.

Events

The custom select component triggers the following events on elements with this component attached:

Name	Description
`uk-select:input`	Fired after the value has changed, providing an opportunity to respond to user input.
`uk-select:open`	Fired after the dropdown menu has been opened, allowing for custom handling of the open event.
`uk-select:close`	Fired after the dropdown menu has been closed, enabling custom handling of the close event.

On This Page
Usage
Adding header
Selecting multiple values
Pre-populating values
Disabling options
Combobox
Disable input
Error state
Preventing layout shift
Internationalization
Available options
Attributes
Events

Request Web Components

Franken UI is an independent project. Help support it and expand its free component library.

Reach out