Inputs

Required plugin

This feature requires the plugin file css/styles/form.css

The inputs are not styled by default, to minimize interaction with other plugins, for instance form validation plugins:

If you want to use the template style, add the class input:

<input type="text" class="input">

For full width inputs, add the class full-width:

<input type="text" class="input full-width">

The class large will add spacing around the text:

<input type="text" class="input large">

Disabled inputs have a custom style, you may force it using the class disabled:

// Really disabled input
<input type="text" class="input" disabled>

// Input looking like it is disabled
<input type="text" class="input disabled">

You can also remove all styling of inputs:

<input type="text" class="input-unstyled">

Stacked inputs

This style is meant for compact input groups:

<ul class="inputs">
	<li><input type="text" class="input-unstyled"></li>
	<li><input type="text" class="input-unstyled"></li>
</ul>

Also available with large inputs:

<ul class="inputs large">
	<li><input type="text" class="input-unstyled"></li>
	<li><input type="text" class="input-unstyled"></li>
</ul>

Radios and checkboxes

Radios:

Unstyled radio Styled radio Disabled radio

// Standard radio
<input type="radio" class="radio">

// Really disabled radio
<input type="radio" class="radio" disabled>

// Radio looking like it is disabled
<input type="radio" class="radio disabled">

Checkboxes:

Unstyled checkbox Styled checkbox Disabled checkbox

// Standard checkbox
<input type="checkbox" class="checkbox">

// Really disabled checkbox
<input type="checkbox" class="checkbox" disabled>

// Checkbox looking like it is disabled
<input type="checkbox" class="checkbox disabled">

Note that if you need to disable/enabled inputs at runtime, you must use the template methods:

// Enable input
$(selector).enableInput();

// Disable input
$(selector).disableInput();

Checkables in buttons

Radios and checkboxes may be wrapped in a label with the class button to create button groups:

Radios First Second Third

<span class="button-group">
	<label for="button-radio-1" class="button green-active">
		<input type="radio" name="button-radio" id="button-radio-1" value="1" checked>
		First
	</label>
	<label for="button-radio-2" class="button green-active">
		<input type="radio" name="button-radio" id="button-radio-2" value="2">
		Second
	</label>
	<label for="button-radio-3" class="button green-active">
		<input type="radio" name="button-radio" id="button-radio-3" value="3">
		Third
	</label>
</span>

Checkboxes First Second Third

<span class="button-group">
	<label for="button-checkbox-1" class="button green-active">
		<input type="checkbox" name="button-checkbox-1" id="button-checkbox-1" value="1">
		First
	</label>
	<label for="button-checkbox-2" class="button green-active">
		<input type="checkbox" name="button-checkbox-2" id="button-checkbox-2" value="2" checked>
		Second
	</label>
	<label for="button-checkbox-3" class="button green-active">
		<input type="checkbox" name="button-checkbox-3" id="button-checkbox-3" value="3">
		Third
	</label>
</span>

Dynamic changes

If you change the value of the radios/checkboxes with javascript, you need to tell the styling plugin that it has changed: just fire a change event:

$(selector).change();

If the change event already has listeners, you can trigger the silent-change event instead

$(selector).trigger('silent-change');

Pseudo-inputs

This style mimics text inputs, so mixed elements can be included. Here are a few examples:

Label Check

<span class="input">
	<label for="pseudo-input-1" class="button blue-gradient">Label</label>
	<input type="text" name="pseudo-input-1" id="pseudo-input-1" class="input-unstyled" value="Value">
	<a href="javascript:void(0)" class="button compact">Check</a>
</span>

<span class="input">
	<label for="pseudo-input-2" class="button orange-gradient">
		<span class="icon-phone small-margin-right"></span>
	</label>
	<select name="pseudo-input-select" class="select compact expandable-list" style="width: 100px">
		<option value="USA">USA</option>
		<option value="United Kingdom">United Kingdom</option>
		...
	</select>
	<input type="text" name="pseudo-input-2" id="pseudo-input-2" class="input-unstyled input-sep" placeholder="Area" value="" maxlength="3" style="width: 30px;">
	<input type="text" name="pseudo-input-3" id="pseudo-input-3" class="input-unstyled" placeholder="Number" value="" style="width: 80px;">
</span>

The class input-sep creates a border on the right side of an unstyled input (left side for RTL), useful to separate inputs

This is an information bubble to help the user.

<span class="input">
	<input type="text" name="pseudo-input-4" id="pseudo-input-4" class="input-unstyled" value="">
	<span class="info-spot">
		<span class="icon-info-round"></span>
		<span class="info-bubble">
			This is an information bubble to help the user.
		</span>
	</span>
</span>