--- layout: default title: Wirefy | Form Elements description: Forms are a common use case for any site or app. We've provided several examples and use cases that can be included in your wireframe. ---

Forms

Forms are a common use case for any site or app. We've provided several examples and use cases that can be included in your wireframe.

Buttons

Buttons are intended for action and thus should have appropriate weight. The standard button is given that weight with a little bit of depth and a strong hover. You can either indicate a button element or add a class of .button to any a element.

There are several mixin options available in the _buttons.scss file.

HTML
<button>Click Me</button>
<button class="disabled" disabled>Click Me</button>
Rendered HTML

<a> with class button

HTML
<a class="button">Click Me</a>
<a class="button disabled" disabled>Click Me</a>
Rendered HTML
Click Me Click Me

Submit Button

HTML
<input type="submit" class="button">
<input type="submit" class="button disabled" disabled>
Rendered HTML

Rounded Corners

HTML
<button class="rounded">Click Me</button>
<button class="rounded disabled" disabled>Click Me</button>
Rendered HTML

Inputs

Most common form control are the text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Please note that not all browsers support of these input types. Check the browser adoption before use. Requires the use of a specified type="" at all times.

HTML
<form novalidate>
  <label>Text Label</label>
  <input type="text" placeholder="Text goes here">
  <label>Email Label</label>
  <input type="email" placeholder="email@example.com">
  <label>URL Label</label>
  <input type="url" placeholder="http://example.com">
</form>
Rendered HTML

Checkboxes & Radio Buttons

Checkboxes are for making decisions between various choices.

HTML
<form novalidate>
  <label>Text Label</label>
  <input type="checkbox"> Option one
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
</form>
Rendered HTML
Option one
Yes No

Validation states

Showing validation states can help better communicate situations that users will have to deal with like error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

HTML
<form novalidate>
	  <label>Text Label</label>
	  <input type="checkbox"> Option one
	  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
	  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
	</form>
Rendered HTML
Something may have gone wrong
Please correct the error
Username is taken
Success!