Select
Huro provides default styles for the native Html select element. There's an additional wrapper for the styles to apply properly. Please refer to the code example for more details about usage.
<div class="field">
<div class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
Rounded Select
The Huro select can have rounded edges. Like other controls, simply add the is-rounded class to the select wrapper element. Please refer to the code example for more details about usage.
<div class="field">
<div class="select is-rounded">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
Font Awesome
Huro selects can have icons attached to them. They work pretty well with Font Awesome icons. You can add an icon element inside the select. Please refer to the code example for more details about usage.
<div class="field">
<div class="control has-icons-left">
<div class="select">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-globe"></i>
</div>
</div>
</div>
Line Icons
Huro selects can have icons attached to them. They work pretty well with Feather icons. You can add an icon element inside the select. Please refer to the code example for more details about usage.
<div class="field">
<div class="control has-icons-left">
<div class="select">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="lnil lnil-basketball"></i>
</div>
</div>
</div>
Feather Icons
Huro selects can have icons attached to them. They work pretty well with Line Icons. You can add an icon element inside the select. Please refer to the code example for more details about usage.
<div class="field">
<div class="control has-icons-left">
<div class="select">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<div class="icon is-small is-left">
<i data-feather="globe"></i>
</div>
</div>
</div>
Loading State
huro selects can be shown in a loading state. To apply that style, simply add the is-loading class to the select wrapping element. Please refer to the code example for more details about usage.
<div class="field">
<div class="select is-loading">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>