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

# File Input

Huro provides default styles for file inputs, in case you need a control to upload a single file in your forms. File inputs can look like upload buttons. Please refer to markup for more details about usage.

Choose a file…
Choose a file…
Choose a file…
Choose a file…

          <div class="field is-grouped">
              <div class="control">
                  <div class="file">
                      <label class="file-label">
                          <input class="file-input" type="file" name="resume">
                          <span class="file-cta">
                              <span class="file-icon">
                                  <i class="fas fa-cloud-upload-alt"></i>
                              </span>
                              <span class="file-label">
                                  Choose a file…
                              </span>
                          </span>
                      </label>
                  </div>
              </div>

              <div class="control">
                  <div class="file is-default">
                      <label class="file-label">
                          <input class="file-input" type="file" name="resume">
                          <span class="file-cta">
                              <span class="file-icon">
                                  <i class="fas fa-cloud-upload-alt"></i>
                              </span>
                              <span class="file-label">
                                  Choose a file…
                              </span>
                          </span>
                      </label>
                  </div>
              </div>

              <div class="control">
                  <div class="file is-primary">
                      <label class="file-label">
                          <input class="file-input" type="file" name="resume">
                          <span class="file-cta">
                              <span class="file-icon">
                                  <i data-feather="upload"></i>
                              </span>
                              <span class="file-label">
                                  Choose a file…
                              </span>
                          </span>
                      </label>
                  </div>
              </div>

              <div class="control">
                  <div class="file is-success">
                      <label class="file-label">
                          <input class="file-input" type="file" name="resume">
                          <span class="file-cta">
                              <span class="file-icon">
                                  <i class="lnil lnil-lg lnil-cloud-upload"></i>
                              </span>
                              <span class="file-label">
                                  Choose a file…
                              </span>
                          </span>
                      </label>
                  </div>
              </div>
          </div>

### Boxed File Input

Huro file inputs can have a boxed style. You just need to add the `is-boxed` class to your `file` element to apply this style. Please refer to markup for more details about usage.

Choose a file…
Choose a file…
Choose a file…

          <div class="field is-grouped">
              <div class="control">
                  <div class="file is-boxed">
                      <label class="file-label">
                          <input class="file-input" type="file" name="resume">
                          <span class="file-cta">
                              <span class="file-icon">
                                  <i class="lnil lnil-32 lnil-cloud-upload"></i>
                              </span>
                              <span class="file-label">
                                  Choose a file…
                              </span>
                          </span>
                      </label>
                  </div>
              </div>

              <div class="control">
                  <div class="file is-boxed is-default">
                      <label class="file-label">
                          <input class="file-input" type="file" name="resume">
                          <span class="file-cta">
                              <span class="file-icon">
                                  <i class="lnil lnil-32 lnil-cloud-upload"></i>
                              </span>
                              <span class="file-label">
                                  Choose a file…
                              </span>
                          </span>
                      </label>
                  </div>
              </div>

              <div class="control">
                  <div class="file is-boxed is-primary">
                      <label class="file-label">
                          <input class="file-input" type="file" name="resume">
                          <span class="file-cta">
                              <span class="file-icon">
                                  <i class="lnil lnil-32 lnil-cloud-upload"></i>
                              </span>
                              <span class="file-label">
                                  Choose a file…
                              </span>
                          </span>
                      </label>
                  </div>
              </div>
          </div>

### File Name

File inputs can show an additional area to display the selected file name. You just need to add the `has-name` class to your `file` element to apply this style. Please refer to markup for more details about usage.

Choose a file… 22082020_project_budget.xls

          <div class="field is-grouped">
              <div class="control">
                  <div class="file has-name is-fullwidth">
                      <label class="file-label">
                          <input class="file-input" type="file" name="resume">
                          <span class="file-cta">
                              <span class="file-icon">
                                  <i class="lnil lnil-lg lnil-cloud-upload"></i>
                              </span>
                              <span class="file-label">
                                  Choose a file…
                              </span>
                          </span>
                          <span class="file-name light-text">
                              22082020_project_budget.xls
                          </span>
                      </label>
                  </div>
              </div>
          </div>

### Right File Name

File inputs can show an additional area to display the selected file name, on the right. You just need to add the `has-name` and `is-right` classes to your `file` element to apply this style. Please refer to markup for more details about usage.

Choose a file… 22082020_project_budget.xls

          <div class="field is-grouped">
              <div class="control">
                  <div class="file has-name is-fullwidth is-right">
                      <label class="file-label">
                          <input class="file-input" type="file" name="resume">
                          <span class="file-cta">
                              <span class="file-icon">
                                  <i class="lnil lnil-lg lnil-cloud-upload"></i>
                              </span>
                              <span class="file-label">
                                  Choose a file…
                              </span>
                          </span>
                          <span class="file-name light-text">
                              22082020_project_budget.xls
                          </span>
                      </label>
                  </div>
              </div>
          </div>