Input Control

The input_control module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

Home
Modules
Input Control

Quick overview

The presentation of forms, input fields, buttons and other interactive elements is always very important for any website or app. The input_control module provides you with much needed styling improvements for all of these elements, while keeping everything simple to use and understand, as well as combine with the other modules. Forms and input elements have a clean, modern design, while some elements like checkoxes and radio buttons get a much needed facelift. Buttons have also been stylized to look the same in all browsers, while keeping their design clean and allowing for a few color and size variants. Grouping inputs and labels or buttons is also part of this module and, as always, responsiveness is an important feature. Finally, all of the components are accessible, with a few minor caveats, that are discussed in their respective section in this page.

Quick start

To use the input_control module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Forms & input

Aligned form (using grid)

Number

Disabled

Readonly

Select

Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <form> element and add your <input> elements inside. Link them to <label> elements for ease of acces and you are pretty much set. We highly recommend using the <fieldset> and <legend> elements to annotate your forms as well, but you can skip them if you wish.

Forms are inline by default. Use the .button-group class on a <div> wrapping inside it an <input> and <label> pair to make sure they always display together in one line. If you want to create aligned forms with a preset layout, you can utilize the grid module's rows and columns.

Sample code

<form>
  <fieldset>
    <legend>Inline form (default style)</legend>
    <div class="input-group">
      <label for="username">username</label> 
      <input type="email" value="" id="username" placeholder="username">
    </div>
    <div class="input-group">
      <label for="pwd">password</label> 
      <input type="password" value="" id="pwd" placeholder="password">
    </div>
  </fieldset>
</form>

Notes

Using the <fieldset> and <legend> elements is highly recommended for a better presentational effect. Using these elements is a matter of personal preference, however try to keep your forms consistent (i.e. either use them in all forms or no forms as to not confuse users).
Some <input> elements, such as date & time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your website or app.
Checkboxes and radio buttons are not stylized the same way as most of the other elements, nor do they follow the exact same stucture for layout. Please refer to the next section for information on how to use those.

<form>
  <fieldset>
    <legend>Responsive form</legend>
    <div class="row">
      <div class="col-sm-12 col-md-4">
        <label for="username">username</label> 
      </div>
      <div class="col-sm-12 col-md">
        <input type="email" value="" id="username" placeholder="username">
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-4">
        <label for="pwd">password</label> 
      </div>
      <div class="col-sm-12 col-md-4">
        <input type="password" value="" id="pwd" placeholder="password">
      </div>
    </div>
  </fieldset>
</form>

Do: You can use .row and .col-SCR_SZ or .col-SCR_SZ-COL_WD (replacing SCR_SZ with one of the available screen size names (sm for smaller screens, md for medium-sized screens or lg for larger screens and COL_WD with a number from 1 to 12 specifying the width of the column) to set specific layouts for your aligned forms. You can also use the same column classes to make them responsive for different screen sizes.

<form>
  <fieldset>
    <legend>Responsive form</legend>
    <div class="row">
      <div class="col-sm-12 col-md-10 col-md-offset-1">
        <label for="username">username</label> 
        <input type="email" value="" id="username" placeholder="username">
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-10 col-md-offset-1">
        <label for="pwd">password</label> 
        <input type="password" value="" id="pwd" placeholder="password">
      </div>
    </div>
  </fieldset>
</form>

Do: Apart from using .row and .col-SCR_SZ or .col-SCR_SZ-COL_WD for responsiveness, you can also use other classes from the grid module such as the offset classes to make your form layouts more interesting.

<style>
  .label-aligned {
    align-items: center;
  }
</style>
<form>
  <fieldset>
    <legend>Responsive form</legend>
    <div class="row label-aligned">
      <div class="col-sm-12 col-md-4">
        <label for="username">username</label> 
      </div>
      <div class="col-sm-12 col-md">
        <input type="email" value="" id="username" placeholder="username">
      </div>
    </div>
  </fieldset>
</form>

Do: When creating aligned forms using the grid module's classes, labels might be off-center vertically compared to their inline counterparts. Use a simple styling for their parent .row element, if you want to adjust their vertical alignment.

<<form>
  <fieldset>
    <legend>Responsive form</legend>
    <div class="row input-group">
      <div class="col-sm-12 col-md-4">
        <label for="username">username</label> 
      </div>
      <div class="col-sm-12 col-md">
        <input type="email" value="" id="username" placeholder="username">
      </div>
    </div>
  </fieldset>
</form>

Don't: Avoid using the .button-group class when creating aligned forms. This might cause unexpected behavior.

Checkboxes & radio buttons

Sample code

Notes

Do:

Don't:

Buttons & button groups

Sample code

Notes

Do:

Don't:

File upload buttons

Sample code

Notes

Do:

Don't:

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.