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

# Inputs

### Input

Huro provides elegant form controls with minimum styling. You can use regular inputs by adding the `input` class to a html `input` element. It's better to wrap inputs inside a `field` and a `control` for consistency.

          <div class="field">
              <div class="control">
                  <input type="text" class="input" placeholder="Username">
              </div>
          </div>

### Help Text

If you are using the regular input wrappers (e.g `field` and `control`), you can easily add a help text to guide users when they interact with your forms. See the code example for more details about usage.

Choose a nice username

          <div class="field">
              <div class="control">
                  <input type="text" class="input" placeholder="Username">
              </div>
              <p class="help">Choose a nice username</p>
          </div>

### Rounded Input

An input form control can have rounded edges. To apply a rounded style to an input, simply add the `is-rounded` class to the `input` element. See the code example for more details about usage.

          <div class="field">
              <div class="control">
                  <input type="text" class="input is-rounded" placeholder="Username">
              </div>
          </div>

### Focus Colors

An input can have different border colors when focused. You simply have to add the appropriate color modifier class. Available classes are `is-primary-focus`, `is-success-focus`, `is-info-focus`, `is-warning-focus`, `is-danger-focus`.

          <div class="field">
              <div class="control">
                  <input type="text" class="input" placeholder="Username">
              </div>
          </div>

### Font Awesome

Huro inputs are fully compatible with Font Awesome 5 icons. make sure to add a `form-icon` element inside you wrapping `control` element. See the code example for more details about usage.

          <div class="field">
              <div class="control has-icon">
                  <input type="text" class="input is-rounded" placeholder="Username">
                  <div class="form-icon">
                      <i class="fab fa-twitter"></i>
                  </div>
              </div>
          </div>

### Line Icons

Huro inputs are fully compatible with Line Icons. make sure to add a `form-icon` element inside you wrapping `control` element. See the code example for more details about usage.

          <div class="field">
              <div class="control has-icon">
                  <input type="text" class="input" placeholder="Company">
                  <div class="form-icon">
                      <i class="lnil lnil-briefcase"></i>
                  </div>
              </div>
          </div>

### Feather Icons

Huro inputs are fully compatible with Feather Icons. make sure to add a `form-icon` element inside you wrapping `control` element. See the code example for more details about usage.

          <div class="field">
              <div class="control has-icon">
                  <input type="text" class="input is-rounded" placeholder="Github URL">
                  <div class="form-icon">
                      <i data-feather="github"></i>
                  </div>
              </div>
          </div>

### Loading Input

An input can be shown in a loading state. To apply that style, simply add the `is-loading` class to the wrapping `control` element.

          <div class="field">
              <div class="control is-loading">
                  <input type="text" class="input" placeholder="Username">
              </div>
          </div>

### Disabled Input

An input can be shown in a disabled state. To apply that style, simply add the `disabled` atribute to the target `input` element.

          <div class="field">
              <div class="control">
                  <input type="text" class="input" placeholder="Username" disabled>
              </div>
          </div>

### Validation

Huro offers input validation styles to go with any type of form validation library you could use in your project. It's CSS based only and gives you a lot of freedom. See the code examples for more details about usage.

Looks like we're good

Incorrect password

          <div class="field">
              <div class="control has-icon has-validation has-success">
                  <input type="text" class="input" placeholder="Username" value="superman">
                  <div class="form-icon">
                      <i data-feather="user"></i>
                  </div>
                  <div class="validation-icon is-success">
                      <i data-feather="check"></i>
                  </div>
                  <div class="validation-icon is-error">
                      <i data-feather="x"></i>
                  </div>
              </div>
              <p class="help success-text">Looks like we're good</p>
          </div>

          <div class="field">
              <div class="control has-icon has-validation has-error">
                  <input type="password" class="input" placeholder="Password" value="fefete6ht">
                  <div class="form-icon">
                      <i data-feather="lock"></i>
                  </div>
                  <div class="validation-icon is-success">
                      <i data-feather="check"></i>
                  </div>
                  <div class="validation-icon is-error">
                      <i data-feather="x"></i>
                  </div>
              </div>
              <p class="help danger-text">Incorrect password</p>
          </div>

### Validation Rounded

Huro offers input validation styles to go with any type of form validation library you could use in your project. It's CSS based only and gives you a lot of freedom. See the code examples for more details about usage.

Looks like we're good

Incorrect password

          <div class="field">
              <div class="control has-icon has-validation has-success">
                  <input type="text" class="input is-rounded" placeholder="Username" value="superman">
                  <div class="form-icon">
                      <i data-feather="user"></i>
                  </div>
                  <div class="validation-icon is-success">
                      <i data-feather="check"></i>
                  </div>
                  <div class="validation-icon is-error">
                      <i data-feather="x"></i>
                  </div>
              </div>
              <p class="help success-text">Looks like we're good</p>
          </div>

          <div class="field">
              <div class="control has-icon has-validation has-error">
                  <input type="password" class="input is-rounded" placeholder="Password" value="fefete6ht">
                  <div class="form-icon">
                      <i data-feather="lock"></i>
                  </div>
                  <div class="validation-icon is-success">
                      <i data-feather="check"></i>
                  </div>
                  <div class="validation-icon is-error">
                      <i data-feather="x"></i>
                  </div>
              </div>
              <p class="help danger-text">Incorrect password</p>
          </div>