Awesomeness

Input Fields

Basic Input Field

Input fields are styled to match the look of other elements of the framework. Group labels and input fields with a .form-component.

Example

Imports

  • SASS:
    @import "base";
@import "imports/modules/forms";

Code

<div class="form-component input--small">
	<label for="firstname">First Name</label>
	<input type="text" id="firstname" placeholder="Frida">
</div>

Input Is Readonly

Readonly input fields can be useful in forms where specific information is predefined. Use them by giving the input field the attribute readonly.

Example

Imports

  • SASS:
    @import "base";
@import "imports/modules/forms";

Code

<div class="form-component input--small">
	<label for="surnamereadonly">Last Name</label>
	<input type="text" id="surnamereadonly" value="Lindström-Blaumeier" readonly>
</div>

Input Is Inline

Inline Fields can be usefull when you have a bunch of small input fields that belong together. Give the .form-component Element the additional class .input--inline.

Example

Imports

  • SASS:
    @import "base";
@import "imports/modules/forms";

Code

<div class="form-component input--mini is-required input--inline">
	<label for="advocate-number">Number</label>
	<input type="text" id="advocate-number" required>
</div>

<div class="form-component input--mini input--inline">
	<label for="advocate-block">Block</label>
	<input type="text" id="advocate-block">
</div>

<div class="form-component input--mini input--inline">
	<label for="advocate-stairway">Building</label>
	<input type="text" id="advocate-stairway">
</div>

<div class="form-component input--mini input--inline">
	<label for="advocate-floor">Floor</label>
	<input type="text" id="advocate-floor">
</div>

<div class="form-component input--mini input--inline">
	<label for="advocate-door">Door</label>
	<input type="text" id="advocate-door">
</div>

Input Field Sizes

Input Fields, Dropdowns and Buttons come in 4 different sizes to fit every layout. Use the additional class .input--mini, .input--small, .input--medium or .input--large to specify the width of the input field.

Example

Imports

  • SASS:
    @import "base";
@import "imports/modules/forms";

Code

<div class="form-component input--mini">
	<label for="input--mini">Mini</label>
	<input type="text" id="input--mini">
</div>
<div class="form-component input--small">
	<label for="input--small">Small</label>
	<input type="text" id="input--small">
</div>
<div class="form-component input--medium">
	<label for="input--medium">Medium</label>
	<input type="text" id="input--medium">
</div>
<div class="form-component input--large">
	<label for="input--large">Large</label>
	<input type="text" id="input--large">
</div>