Schema

Forms

Content driven input forms (input, textarea, select, etc) need the form-element. This class gives these elements their styling. Examples are below.

To disable any element give it the class is-disabled

Basic Form Example

Input elements default to full width, so you'll need to set a width of your choosing.

EXAMPLE

Some text here.

<form>
 <div class="form-group">
  <label for="emailID">Email Address</label>
  <input type="email" class="form-element" id="emailID" placeholder="Example Email">
 </div>
 <div class="form-group">
  <label for="passwordID">Example Password</label>
  <input type="email" class="form-element" id="passwordID" placeholder="Example Password">
 </div>
 <div class="form-group">
  <label for="someFile">File Input</label>
  <input type="email" class="form-element" id="someFile">
  <p>Some text here.</p>
 </div>
 <div class="form-group">
  <label>
    <input type="checkbox"> Check this box
  </label>
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
</form>

Basic Form Element

This is a basic input field. Be sure to add the class form-element to the input.

EXAMPLE

<input type="text" class="form-element">

Large Form Element

EXAMPLE

Add the class form-element-lg for a larger input.

<input type="text" class="form-element-lg form-element">

Small Form Element

EXAMPLE

Add the class form-element-sm for a larger input.

<input type="text" class="form-element-sm form-element">

Disable Element

EXAMPLE

Add the class is-disabled to any element to disable it.

<input type="text" class="form-element-sm form-element is-disabled">

Validation States

Schema provides validation styling for visualizing your UI.

EXAMPLE

Wrap your label and form-element in a div and assign it a class depending on what state you want. has-success, has-danger, has-info, has-warning, has-primary.

Also include these classes on the input (form-element) element. f-is-primary, f-is-success, f-is-info, f-is-danger, f-is-warning 

<div class="has-warning">
 <label>Form-element has warning message!</label>
 <input class="form-element f-is-warning">
</div>

Validation States With Icons

Add has-icon to the parent div wrapping your elements.

EXAMPLE

<div class="has-warning has-icon">
 <label>Form-element has warning message!</label>
 <input class="form-element f-is-warning">
</div>

Input Focus

Example of the form-element:focus style.

EXAMPLE

Textarea

EXAMPLE

<textarea class="form-element" rows="4">

Checkboxes and Inputs

EXAMPLE



<div class="form-group">
  <label>
    <input type="checkbox"> Check this box
  </label>
  <label>
    <input type="checkbox"> Check this box
  </label>
  <label>
    <input type="checkbox"> Check this box
  </label>
</div>

<div class="radio-btn">
 <label>
    <input type="radio" name="radioOption" id="radioOption1" value="radioOption1" checked>
    This is the default selected answer 
  </label>
</div>
<div class="radio-btn">
  <label>
    <input type="radio" name="radioOption" id="radioOption2" value="radioOption2">
    Option two is totally awesome and wants to be selected as well 
  </label>
</div>
<div class="radio-btn">
  <label>
    <input type="radio" name="radioOption" id="radioOption3" value="radioOption3" disabled>
    Option three is sad he has become disabled 
  </label>
</div>