Iceberg UI - Input

Text Input with label

To create stylized text input, put your input label and input element inside a div with class 'input-group'.

Username Password

                
  <div class="input-group">
    <label for="username">Username</label>
    <input type="text" class="input" id="username" placeholder="Enter your username" />
    <label for="password">Password</label>
    <input type="password" class="input" id="password" placeholder="Enter your password" />
  </div>

Text Input with validation error

To create a text input with validation error, inside the 'input-group' div give the 'input-error' class to the element you want to show error and use 'error-message' on a div followed by the 'input-error' div.

Username Password

Your password must be at least 6 characters long.

                
  <div class="input-group">
    <label for="username">Username</label>
    <input type="text" id="username" placeholder="Enter your username" />
    <label for="password">Password</label>
    <input type="password" id="password" placeholder="Enter your password" />
    <div class="error-message">
      Your password must be at least 6 characters long.
    </div>                  
  </div>