Inputs.js Examples

How to use it

Inputs with text type support.


You can use placeholder attribute to set placeholder. Warning: You must place label element right after input element.

<div class='form-group'>
  <input type='text' id="input1" placeholder='Type your first name'>
  <label for="input1">First Name</label>
</div>
MM/DD/YYYY

You can add .error class to input to show error state. Add .help-block element to show error message.

<div class='form-group'>
  <input type='text' id="input2" class='error'>
  <label for="input2">Birtday</label>
  <span class='help-block'>MM/DD/YYYY</span>
</div>

Inputs with email, password type support.


Enter at least 8 symbols

Use .help-block element to show hints.

<div class='form-group'>
  <input type='password' id="password1">
  <label for="password1">Password</label>
  <span class='help-block'>Enter at least 8 symbols</span>
</div>

Textarea input support.

<div class='form-group'>
  <textarea id="input3" rows=3></textarea>
  <label for="input3">Describe Youself</label>
</div>

Select input support.


You should add .select class to parent element.

<div class="form-group select">
  <select id='select1'>
    <option>...</option>
  </select>
  <label for='select1'>Best CSS framework</label>
</div>

Inputs with checkbox type support.


<div class='form-group'>
  <input type='checkbox' id='input4'>
  <label for="input4">Check if you like it</label>
</div>

Inputs with radio type support.


You can make inline radio/checkboxes by removing .form-group wrapper.

<div class='form-group'>
  <input type='radio' id='input5' name='radio' checked>
  <label for="input5">Option one is for serious guys</label>
</div>
...

Javascript functions

If you change input value programaticaly you run into problem that label is freezes. To fix it run refresh() method on the input:

$('#input1').val('new value').refresh();

Customization

You can customize controls using overriding the following LESS variables:

@label-color: #555;
@label-font: 'Helvetica Neue';
@input-font: 'Helvetica Neue';
@placeholder-font: normal 300 100% 'Helvetica Neue';
@placeholder-color: #999;
@help-color: #999;
@error-color: #a94442;
@input-border: #ccc;
@input-bg: #fff;
@input-color: #555;
@input-focus-color: #66afe9;
@checkbox-color: #666;
@checkbox-checked-color: #5cb85c;
@checkbox-border-width: 2px;
@checkbox-mark-width: 2px;
@radio-color: #666;
@radio-border-width: 2px;
@radio-checked-color: #5bc0de;

You can get package via Bower: bower install inputs --save-dev

CSS Frameworks Support

Inputs doesn't rely on some specific CSS framework so you can easily use it in any CSS framework as you like. For example:

Use without any CSS framework Use with Bootstrap Use with Pure CSS

Bootstrap support

Add .inputs class to form and enjoy:

<form class='inputs' role='form'>
  <div class='form-group'>
  ...

Coded by Nick Zhebrun. AnjLab, 2014.