Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

H Select

Huro also provides from scratch form controls like this H Select, in replacement of the native select. It is controled with a mix of CSS and javascript and plays quite nicely with modern designs. Please refer to the code examples for more details about usage.

Select a Hero
Superman
Batman
Deadpool
Spawn
Galactus

      <div class="field">
          <div class="control">
              <div class="h-select">
                  <div class="select-box">
                      <span>Select a Hero</span>
                  </div>
                  <div class="select-icon">
                      <i data-feather="chevron-down"></i>
                  </div>
                  <div class="select-drop has-slimscroll-sm">
                      <div class="drop-inner">
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <span>Superman</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <span>Batman</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <span>Deadpool</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <span>Spawn</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <span>Galactus</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      

Rounded H Select

The H Select can have rounded edges like other form controls. Simply add the is-rounded class to the h-select element. Please refer to the code example for more details about usage.

Select a Hero
Superman
Batman
Deadpool
Spawn
Galactus

      <div class="field">
          <div class="control">
              <div class="h-select is-rounded">
                  <div class="select-box">
                      <span>Select a Hero</span>
                  </div>
                  <div class="select-icon">
                      <i data-feather="chevron-down"></i>
                  </div>
                  <div class="select-drop has-slimscroll-sm">
                      <div class="drop-inner">
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <span>Superman</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <span>Batman</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <span>Deadpool</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <span>Spawn</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <span>Galactus</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      

With Images

The H Select can display options including rounded images, and is ideal for users or any 1:1 ratio images. Add the has-media class to the target h-select. Please refer to the code example for more details about usage.

Select a friend
Erik K.
Joshua S.
Melany W.
Alice C.
Esteban C.

      <div class="field">
          <div class="control">
              <div class="h-select has-media">
                  <div class="select-box">
                      <span>Select a friend</span>
                  </div>
                  <div class="select-icon">
                      <i data-feather="chevron-down"></i>
                  </div>
                  <div class="select-drop has-slimscroll-sm">
                      <div class="drop-inner">
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <img src="https://via.placeholder.com/150x150" alt="">
                                  <span>John Smith</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <img src="https://via.placeholder.com/150x150" alt="">
                                  <span>Alan Kricks</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <img src="https://via.placeholder.com/150x150" alt="">
                                  <span>Stan Mayfield</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <img src="https://via.placeholder.com/150x150" alt="">
                                  <span>Mike Templeton</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <img src="https://via.placeholder.com/150x150" alt="">
                                  <span>Jimmy Cusack</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      

With Dropup

The H Select dropdown can be a dropup instead. If you need to use the dropup, simply add the is-dropup class to the target h-select element. Please refer to the code example for more details about usage.

Select a friend
Erik K.
Joshua S.
Melany W.
Alice C.
Esteban C.

      <div class="field">
          <div class="control">
              <div class="h-select is-rounded is-dropup has-media">
                  <div class="select-box">
                      <span>Select a friend</span>
                  </div>
                  <div class="select-icon">
                      <i data-feather="chevron-down"></i>
                  </div>
                  <div class="select-drop has-slimscroll-sm">
                      <div class="drop-inner">
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <img src="https://via.placeholder.com/150x150" alt="">
                                  <span>John Smith</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <img src="https://via.placeholder.com/150x150" alt="">
                                  <span>Alan Kricks</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <img src="https://via.placeholder.com/150x150" alt="">
                                  <span>Stan Mayfield</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <img src="https://via.placeholder.com/150x150" alt="">
                                  <span>Mike Templeton</span>
                              </div>
                          </div>
                          <div class="option-row">
                              <input type="radio" name="hero_select">
                              <div class="option-meta">
                                  <img src="https://via.placeholder.com/150x150" alt="">
                                  <span>Jimmy Cusack</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      

Basic Combo

Huro provides built in icon and image combo boxes in replacement of the native html5 select. This element requires javascript to work properly. Please refer to the code example for more details about usage.

Service Type
Medicine

      <div class="field">
          <div class="control is-combo">
              <div class="combo-label">Service Type</div>
              <div class="combo-box">
                  <div class="box-inner">
                      <div class="combo-item">
                          <i class="lnil lnil-medical-briefcase"></i>
                          <span class="selected-item">Medicine</span>
                      </div>
                  </div>
                  <div class="box-chevron">
                      <i data-feather="chevron-down"></i>
                  </div>
                  <div class="box-dropdown">
                      <div class="dropdown-inner has-slimscroll">
                          <ul>
                              <li>
                                  <span class="item-icon">
                                      <i class="lnil lnil-ambulance-alt-1"></i>
                                  </span>
                                  <span class="item-name">Ambulance</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <i class="lnil lnil-first-aid"></i>
                                  </span>
                                  <span class="item-name">First Aid</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li class="is-active">
                                  <span class="item-icon">
                                      <i class="lnil lnil-medical-briefcase"></i>
                                  </span>
                                  <span class="item-name">Medicine</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <i class="lnil lnil-hospital-alt-3"></i>
                                  </span>
                                  <span class="item-name">Hospital</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      

Rounded Combo

Like other form controls, the Huro combo box can have rounded edges. To apply this style, simply add the is-rounded class to the target combo-box element. See the code example for more details about usage.

Service Type
Medicine

      <div class="field">
          <div class="control is-combo">
              <div class="combo-label">Service Type</div>
              <div class="combo-box is-rounded">
                  <div class="box-inner">
                      <div class="combo-item">
                          <i class="lnil lnil-medical-briefcase"></i>
                          <span class="selected-item">Medicine</span>
                      </div>
                  </div>
                  <div class="box-chevron">
                      <i data-feather="chevron-down"></i>
                  </div>
                  <div class="box-dropdown">
                      <div class="dropdown-inner has-slimscroll">
                          <ul>
                              <li>
                                  <span class="item-icon">
                                      <i class="lnil lnil-ambulance-alt-1"></i>
                                  </span>
                                  <span class="item-name">Ambulance</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <i class="lnil lnil-first-aid"></i>
                                  </span>
                                  <span class="item-name">First Aid</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li class="is-active">
                                  <span class="item-icon">
                                      <i class="lnil lnil-medical-briefcase"></i>
                                  </span>
                                  <span class="item-name">Medicine</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <i class="lnil lnil-hospital-alt-3"></i>
                                  </span>
                                  <span class="item-name">Hospital</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      

Square Image Combo

Instead of the regular icons, Huro combo boxes can have images instead. The markup is slightly different from the regular combo box. Please refer to the markup for more details about usage.

Git type
Select a language

      <div class="field">
          <div class="control is-combo">
              <div class="combo-label">Git type</div>
              <div class="image-combo-box">
                  <div class="box-inner">
                      <div class="combo-item">
                          <img src="https://via.placeholder.com/150x150" alt="">
                          <span class="selected-item">Select a language</span>
                      </div>
                  </div>
                  <div class="box-chevron">
                      <i data-feather="chevron-down"></i>
                  </div>
                  <div class="box-dropdown">
                      <div class="dropdown-inner has-slimscroll">
                          <ul>
                              <li>
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x150" alt="">
                                  </span>
                                  <span class="item-name">Javascript</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x150" alt="">
                                  </span>
                                  <span class="item-name">Angular</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x150" alt="">
                                  </span>
                                  <span class="item-name">Html5</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x150" alt="">
                                  </span>
                                  <span class="item-name">Android</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      

Rounded Image Combo

Image combo boxes can have rounded images instead of squared ones. To apply that style, simply add the has-rounded-images class to the target image-combo-box element. See markup for more details about usage.

Language
Select a language

      <div class="field">
          <div class="control is-combo">
              <div class="combo-label">Language</div>
              <div class="image-combo-box has-rounded-images">
                  <div class="box-inner">
                      <div class="combo-item">
                          <img src="https://via.placeholder.com/150x150" data-demo-src="assets/img/photo/demo/misc/code.png" alt="">
                          <span class="selected-item">Select a language</span>
                      </div>
                  </div>
                  <div class="box-chevron">
                      <i data-feather="chevron-down"></i>
                  </div>
                  <div class="box-dropdown">
                      <div class="dropdown-inner has-slimscroll">
                          <ul>
                              <li>
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x150" alt="">
                                  </span>
                                  <span class="item-name">Javascript</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x150" alt="">
                                  </span>
                                  <span class="item-name">Angular</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x150" alt="">
                                  </span>
                                  <span class="item-name">Html5</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x150" alt="">
                                  </span>
                                  <span class="item-name">Android</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      

Stacked Image Combo

Regular image combo boxes can be enhanced to become stacked image combo boxes. More than one option can be selected, making the images stack in the main combo box. Please refer to the markup for more details about usage.

Languages
Select one or more languages

      <div class="field">
          <div class="control is-combo">
              <div class="combo-label">Languages</div>
              <div class="stacked-combo-box has-rounded-images">
                  <div class="box-inner">
                      <div class="combo-item">
                          <img id="skill-placeholder"  src="https://via.placeholder.com/150x150" alt="">
                          <span class="selected-item">Select one or more languages</span>
                      </div>
                  </div>
                  <div class="box-chevron">
                      <i data-feather="chevron-down"></i>
                  </div>
                  <div class="box-dropdown">
                      <div class="dropdown-inner has-slimscroll">
                          <ul>
                              <li data-skill="javascript-skill">
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x15" alt="">
                                  </span>
                                  <span class="item-name">Javascript</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li data-skill="angular-skill">
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x15" alt="">
                                  </span>
                                  <span class="item-name">Angular</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li data-skill="reactjs-skill">
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x15" alt="">
                                  </span>
                                  <span class="item-name">Reactjs</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li data-skill="vuejs-skill">
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x15" alt="">
                                  </span>
                                  <span class="item-name">Vuejs</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li data-skill="nodejs-skill">
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x15" alt="">
                                  </span>
                                  <span class="item-name">Nodejs</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li data-skill="android-skill">
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x15" alt="">
                                  </span>
                                  <span class="item-name">Android</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li data-skill="swift-skill">
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x15" alt="">
                                  </span>
                                  <span class="item-name">Swift</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li data-skill="wordpress-skill">
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x15" alt="">
                                  </span>
                                  <span class="item-name">WordPress</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li data-skill="laravel-skill">
                                  <span class="item-icon">
                                      <img src="https://via.placeholder.com/150x15" alt="">
                                  </span>
                                  <span class="item-name">Laravel</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      

User Combo

Another variant of the combo box lets you use avatar like images inside your combo boxes, including the badge image. This particularly helpful for lists of users. Please refer to the markup for more details about usage.

User
Select a user

      <div class="field">
          <div class="control is-combo">
              <div class="combo-label">User</div>
              <div class="user-combo-box">
                  <div class="box-inner">
                      <div class="combo-item">
                          <div class="avatar-container">
                              <img class="avatar" src="https://via.placeholder.com/150x150" data-demo-src="assets/img/avatars/placeholder.jpg" alt>
                              <img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
                          </div>
                          <span class="selected-item is-pushed">Select a user</span>
                      </div>
                  </div>
                  <div class="box-chevron">
                      <i data-feather="chevron-down"></i>
                  </div>
                  <div class="box-dropdown">
                      <div class="dropdown-inner has-slimscroll">
                          <ul>
                              <li>
                                  <span class="item-icon">
                                      <img class="avatar" src="https://via.placeholder.com/150x150" alt>
                                      <img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
                                  </span>
                                  <span class="item-name">Jimmy S.</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <img class="avatar" src="https://via.placeholder.com/150x150" alt>
                                      <img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
                                  </span>
                                  <span class="item-name">Alan W..</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <img class="avatar" src="https://via.placeholder.com/150x150" alt>
                                      <img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
                                  </span>
                                  <span class="item-name">Danny D.</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <img class="avatar" src="https://via.placeholder.com/150x150" alt>
                                      <img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
                                  </span>
                                  <span class="item-name">Mary L.</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                              <li>
                                  <span class="item-icon">
                                      <img class="avatar" src="https://via.placeholder.com/150x150" alt>
                                      <img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
                                  </span>
                                  <span class="item-name">Alex S.</span>
                                  <span class="checkmark">
                                      <i data-feather="check"></i>
                                  </span>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
      </div>