Inputs

From single input controls like text boxes to full form patterns.

Text Input

<input class="c-field" type="text">
<textarea class="c-field"></textarea>
<select class="c-field">
  <option>...</option>
</select>

colors

<input class="c-field c-field--success" type="text">
<input class="c-field c-field--error" type="text">
<input class="c-field" disabled type="text">

Icons

<div class="o-field o-field--icon-left">
  <i class="fa fa-fw fa-calendar c-icon"></i>
  <input class="c-field" type="text">
</div>
<div class="o-field o-field--icon-right">
  <input class="c-field" type="text">
  <i class="fa fa-fw fa-search c-icon"></i>
</div>
<div class="o-field o-field--icon-left o-field--icon-right">
  <i class="fa fa-fw fa-user c-icon"></i>
  <input class="c-field c-field--success" type="text">
  <i class="fa fa-fw fa-check c-icon"></i>
</div>

Sizes

<input class="c-field u-xsmall" type="text">
<input class="c-field u-small" type="text">
<input class="c-field u-medium" type="text">
<input class="c-field u-large" type="text">
<input class="c-field u-xlarge" type="text">
<input class="c-field u-super" type="text">

Input Groups

Inline

<div class="c-input-group">
  <div class="o-field">
    <input class="c-field">
  </div>
  <div class="o-field">
    <input class="c-field">
  </div>
  <div class="o-field">
    <input class="c-field">
  </div>
</div>

Fixed width

Use .o-field--fixed to fix the width of the field without it breaking the layout of the group. 

<div class="c-input-group">
  <div class="o-field">
    <input class="c-field">
  </div>
  <div class="o-field o-field--fixed" style="width: 50%">
    <input class="c-field">
  </div>
  <div class="o-field">
    <input class="c-field">
  </div>
</div>

Stacked

<div class="c-input-group c-input-group--stacked">
  <input class="c-field">
  <input class="c-field">
  <input class="c-field">
</div>

Buttons

<div class="c-input-group">
  <div class="o-field">
    <input class="c-field">
  </div>
  <button class="c-button c-button--brand">Action</button>
</div>
<div class="c-input-group">
  <button class="c-button c-button--brand">Action</button>
  <div class="o-field">
    <input class="c-field">
  </div>
</div>
<div class="c-input-group">
  <button class="c-button c-button--brand">Action</button>
  <div class="o-field">
    <input class="c-field">
  </div>
  <button class="c-button c-button--brand">Action</button>
</div>

Rounded

<div class="c-input-group c-input-group--rounded">
  <div class="o-field">
    <input class="c-field">
  </div>
  <div class="o-field">
    <input class="c-field">
  </div>
  <div class="o-field">
    <input class="c-field">
  </div>
</div>
<div class="c-input-group c-input-group--rounded">
  <button class="c-button c-button--brand">Action</button>
  <div class="o-field">
    <input class="c-field">
  </div>
  <button class="c-button c-button--brand">Action</button>
</div>
<div class="c-input-group c-input-group--rounded-left">
  <button class="c-button c-button--brand">Action</button>
  <div class="o-field">
    <input class="c-field">
  </div>
  <button class="c-button c-button--brand">Action</button>
</div>
<div class="c-input-group c-input-group--rounded-right">
  <button class="c-button c-button--brand">Action</button>
  <div class="o-field">
    <input class="c-field">
  </div>
  <button class="c-button c-button--brand">Action</button>
</div>

Checkboxes and Radios

Place your checkboxes and radios within labels and append the .c-field--choice modifier class. 

<label class="c-field c-field--choice">
  <input type="checkbox"> Tick the box
</label>
<label class="c-field c-field--choice">
  <input name="radios" type="radio" checked> Yes
</label>
<label class="c-field c-field--choice">
  <input name="radios" type="radio"> No
</label>

Fieldsets and Legends

Use .fieldset and .fieldset__legend classes to apply Blaze's styles to ensure consistent fieldset behaviours.

A group of controls 
<fieldset class="o-fieldset">
  <legend class="o-fieldset__legend">A group of controls</legend>
  <label class="c-field c-field--choice">
    <input type="radio" name="optionsRadios">
    Option one
  </label>
  <label class="c-field c-field--choice">
    <input type="radio" name="optionsRadios">
    Option two
  </label>
  <label class="c-field c-field--choice">
    <input type="radio" name="optionsRadios">
    Option three
  </label>
  <label class="c-field c-field--choice">
    <input type="radio" name="optionsRadios">
    Option four
  </label>
</fieldset>

Disabled fieldset

Disabling a fieldset will disable all controls within it and Blaze will apply the disabled styling.

A group of controls 
<fieldset class="o-fieldset" disabled>
  <legend class="o-fieldset__legend">A group of controls</legend>
  <label class="c-field c-field--choice">
    <input type="radio" name="optionsRadios">
    Option one
  </label>
  <label class="c-field c-field--choice">
    <input type="radio" name="optionsRadios">
    Option two
  </label>
  <label class="c-field c-field--choice">
    <input type="radio" name="optionsRadios">
    Option three
  </label>
  <label class="c-field c-field--choice">
    <input type="radio" name="optionsRadios">
    Option four
  </label>
</fieldset>

Labels and Form Elements

<!-- Approach one -->
<div class="o-form-element">
  <label class="c-label" for="nickname">Nickname:</label>
  <input id="nickname" placeholder="Nickname" class="c-field">
</div>
<!-- Approach two -->
<label class="c-label o-form-element">
  Real name:
  <input class="c-field c-field--label" placeholder="Real name">
</label>

Hints

<label class="c-label">
  Username:
  <input class="c-field c-field--label">
  <div class="c-hint">Make up a username or use your email address</div>
</label>

.c-hint--static will make the hint visible at all times.

There are also .c-hint--success and .c-hint--error modifiers that will change the color of the text.

Forms

Blaze has no classes for forms, rather it relies on styling the child blocks of forms; fieldsets, legends, labels and fields.

And all together now!
Account login: 
<fieldset class="o-fieldset">
  <legend class="o-fieldset__legend">And all together now!</legend>
  <div class="o-form-element">
    <label class="c-label" for="houseno">Address line 1:</label>
    <input id="houseno" placeholder="House name or number" class="c-field">
  </div>
  <label class="c-label o-form-element">
    Postcode:
    <input class="c-field c-field--label" placeholder="e.g. AB12 3CD">
  </label>
  <label class="c-label c-field c-field--choice o-form-element">
    <input type="checkbox">
    Send me spam
  </label>
  <fieldset class="o-fieldset c-list c-list--inline c-list--unstyled">
    <legend class="o-fieldset__legend">Account login:</legend>
    <label class="c-label c-field c-field--choice c-list__item">
      <input type="radio" name="account" checked>
      New user
    </label>
    <label class="c-label c-field c-field--choice c-list__item">
      <input type="radio" name="account">
      Existing user
    </label>
  </fieldset>
  <div class="o-form-element">
    <label class="c-toggle">
      Activate lockdown?
      <input type="checkbox" checked>
      <div class="c-toggle__track">
        <div class="c-toggle__handle"></div>
      </div>
    </label>
  </div>
</fieldset>