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.
<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.
<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.
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.
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.
- 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.
- 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.
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.
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.
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.
-
-
-
-
-
<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>