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>