Github

Input Control

The input_control module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements' 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.


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

Inline form (default style)
 
Fluid form
Vertical form
Aligned form (using grid)

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 access 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 .input-group class on a <div> wrapping inside it an <input> and <label> pair to make sure they always display together in one line. You can make your .input-groups respond to viewport changes, by adding the .fluid class to them or you can align them vertically by adding the .vertical class. Finally, 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>Simple form</legend>
    <div class="input-group fluid">
      <label for="username">Username</label>
      <input type="email" value="" id="username" placeholder="username">
    </div>
    <div class="input-group fluid">
      <label for="pwd">Password</label>
      <input type="password" value="" id="pwd" placeholder="password">
    </div>
    <div class="input-group vertical">
      <label for="nmbr">Number</label>
      <input type="number" id="nmbr" value="5">
    </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.
  • Try not to combine the grid module's classes with .fluid or .vertical .input-groups, as this might cause certain styles to overlap and not display exactly like you want them to.
<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 .input-group class when creating aligned forms. This might cause unexpected behavior.

Checkboxes & radio buttons




  
  
  


Checkboxes and radio buttons come pre-styled, using the checkbox hack, while remaining fully accessible. To create a checkbox or radio button, start using a <div> that implements the .input-group class, and then add an <input> of the proper type inside it ("checkbox" or "radio"), followed immediately by a <label> linking to it. Remember to add tabindex="0" to your <input>, so that it will register properly for screen readers.

Sample code

<div class="input-group">
  <input type="checkbox" id="check1" tabindex="0">
  <label for="check1">Checkbox</label>
</div>

<div class="input-group">
  <input type="radio" id="rad1" tabindex="0" name="radio-group-1">
  <label for="rad1">Radio</label>
</div>

Notes

  • Checkboxes and radio buttons are fully accessible. However, if not provided with a label, they are not visible to users, but only to screen readers.
<div class="input-group">
  <input type="radio" id="rad1" tabindex="0" name="radio-group-1">
  <label for="rad1">Value 1</label>
  <input type="radio" id="rad2" tabindex="0" name="radio-group-1">
  <label for="rad2">Value 2</label>
</div>

Do: You can add multiple radio buttons inside one .input-group, as long as they follow the syntax shown above. In fact, we strongly recommend grouping controls that are relevant to each other in this manner.

<input type="checkbox" id="check1" tabindex="0">
<label for="check1">Checkbox</label>

Don't: Always use an .input-group for your checkboxes and radio buttons. Not doing so will cause the checkbox or radio button to not display properly.

<div class="input-group">
  <input type="checkbox" id="check1"
  <label for="check1">Checkbox</label>
</div>

Don't: Remember to add tabindex="0" to all your checkboxes and radio buttons to make them accessible.

<div class="input-group">
  <label for="check1">Checkbox</label>
  <input type="checkbox" id="check1" tabindex="0">
</div>

Don't: The structure of checkboxes and radio buttons is very strict, meaning that the <label> should always be after the <input> and never before, otherwise the checkbox or radio button will not display properly.

<div class="input-group">
  <input type="radio" id="rad1" tabindex="0" name="radio-group-1">
  <input type="radio" id="rad2" tabindex="0" name="radio-group-1">
  <label for="rad2">Value 2</label>
  <label for="rad1">Value 1</label>
</div>

Don't: When using multiple radio buttons inside an .input-group, remember to use the usual structure of the radio button component for each radio button (i.e. the <input> and <label>). Not doing so will cause the radio buttons to not display properly.

<div class="input-group">
  <input type="checkbox" id="check1" tabindex="0">
</div>

Don't: Never leave a checkbox or radio button without a <label>. The <label> is essential to properly display the checkbox or radio button.

Switches




Switches are almost identical in structure to checkboxes and radio buttons (an .input-group containing an <input> of the proper type inside it ("checkbox" or "radio"), followed immediately by a <label> linking to it), their only difference being that you need to add the .switch class to <label> element to turn your input into a switch. Remember to apply tabindex="0" to your <input> to make it accessible.

Sample code

<div class="input-group">
  <input type="checkbox" id="switch1" tabindex="0">
  <label for="switch1" class="switch">Checkbox switch</label>
</div>

<div class="input-group">
  <input type="radio" id="radswitch1" tabindex="0" name="radio-group-1">
  <label for="radswitch1" class="switch">Radio switch</label>
</div>

Notes

  • You can create your own color variants for the .switch component. For more information, check out the customization page.
<div class="input-group">
  <label for="switch1">Switch with text on its left</label>
  <input type="checkbox" id="switch1" tabindex="0">
  <label for="switch1" class="switch"></label>
</div>

Do: By using two <label> elements, you can move the actual .switch to the right of the label's text, effectively allowing you to change the layout. Remember to not add any text to your second <label> that implements the .switch class. You might want, however, to add a few trailing spaces to the first <label> element to make sure the text does not get covered by the component.

Buttons & button groups

Button group

All button types have been stylized by default, while maintaining accessiblity. Simply add any <button> or an <input> with a button type (i.e. "button", "submit" or "reset") and they will be styled accordingly. You can also use the .button class or the role="button" attribute for links, labels and other elements of your choice to make them look like buttons.

Color variants are available in the form of the .primary, .secondary, .tertiary and .inverse classes. Size variants are available as well in the form of .small and .large classes.

Finally, you can create responsive groups of buttons by wrapping them inside a <div> with the .button-group class.

Sample code

<button>Default button</button>
<input type="button" class="primary" value="Primary button">
<input type="reset" class="secondary" value="Secondary button">
<input type="submit" class="tertiary" value="Tertiary button">
<button class="inverse">Inverse button</button>
<button class="small">Small button</button>
<button class="large">Large button</button>
<button disabled>Disabled button</button>
<a href="#" class="button">Link button</a>
<a href="#" role="button">Link button</a>
<label class="button">Label button</label>
<label role="button">Label button</label>

<div class="button-group">
  <button>Button</button>
  <button>Button</button>
  <button>Button</button>
</div>

Notes

  • If you want more color or size variants for your buttons, check out the customization page.
  • The .button-group component is compatible with modern browsers, but might not display properly in older browsers.
  • .button-groups will display as a horizontal container with all their buttons in one row on medium-sized and larger displays, however they will collapse into a column view for smaller displays.
<button class="inverse small">Small inverse button</button>

Do: You can mix and match button color and size variants to achieve the desired effect.

<button class="secondary inverse">Problematic button</button>
<!-- or -->
<button class="small large">Problematic button</button>

Don't: Avoid mixing two or more button color or size variants, as these combinations might result in unexpected behavior.

<div class="button-group">
  <button>Button</button>
  <input type="reset" class="secondary" value="Secondary button">
  <label class="button inverse">Label button</label>
</div>

Do: You can use button color variants inside the same .button-group. You can also use any component styled like a button inside a .button-group.

<div class="button-group">
  <button class="large">Button</button>
  <button>Button</button>
  <button class="small">Button</button>
</div>

Don't: Avoid using button size variants inside a .button-group, as this might result in unexpected behavior.

File upload buttons



File upload buttons are commonly a sore spot in CSS frameworks. We try to remedy this problem by hiding the <input type="file">, while maintaining accessibility and using a linked <label> of the .button class to display it in a modern way.

Sample code

<input type="file" id="file-input">
<label for="file-input" class="button">Upload file...</label>

Notes

  • The icon displayed in the example above is not part of the button styling.
  • File upload buttons do not change their text to the name of the file after the user has selected a file to upload. You can, however, add this functionality using a few lines of Javascript.
  • File upload buttons cannot be focused (i.e. have a :focus state) using the keyboard and this applies to linked labels, too. You can use Javascript to add this functionality, if you wish.
<div class="input-group">
  <input type="file" id="file-input">
  <label for="file-input" class="button">Upload file...</label>
</div>

Do: You can use an .input-group to wrap the file upload <input> and its linked <label>, if you wish.

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.