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
<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
<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
- Ambulance
- First Aid
- Medicine
- Hospital
<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
- Ambulance
- First Aid
- Medicine
- Hospital
<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
-
Javascript
-
-
-
<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
-
-
-
-
-
<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>