### Select Language

### Activity

- Team
- Projects
- Schedule

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

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Elements Hub
- Colors
- Helpers
- Buttons
- Blocks
- Content
- Tags & Badges
- Icons
  - Line Icons Light
  - Line Icons Regular
  - Font Awesome 5
  - Feather Icons
- Cards
  - Basic Cards
  - Advanced Cards
  - Bulma Cards
- Table
- Tooltips
- Forms
  - Inputs
  - Input Addons
  - Textarea
  - Selects
  - Custom
  - File Input
- Toggles
  - Checkboxes
  - Radios
  - Switches

# Selects

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