Skip to main content

Inputs

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

Text Input

<input class="c-field" placeholder="Type in here..." type="text" />
<textarea class="c-field" placeholder="Type in here..."></textarea>
<select class="c-field">
  <option>Choose me...</option>
</select>

Colors

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

Icons

<div class="o-field o-field--icon-left">
  <i class="fa-solid fa-calendar-days 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-solid fa-magnifying-glass c-icon"></i>
</div>
<div class="o-field o-field--icon-left o-field--icon-right">
  <i class="fa-solid fa-user c-icon u-color-brand"></i>
  <input class="c-field c-field--success" type="text">
  <i class="fa-solid fa-check c-icon u-color-green"></i>
</div>

Sizes

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

Input Groups

Inline

<div class="c-input-group">
  <div class="o-field">
    <input class="c-field" placeholder=".c-input-group">
  </div>
  <div class="o-field">
    <input class="c-field" placeholder=".c-input-group">
  </div>
  <div class="o-field">
    <input class="c-field" placeholder=".c-input-group">
  </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" placeholder=".c-input-group">
  </div>
  <div class="o-field o-field--fixed" style="width:50%">
    <input class="c-field" placeholder=".c-input-group">
  </div>
  <div class="o-field">
    <input class="c-field" placeholder=".c-input-group">
  </div>
</div>

Stacked

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

Buttons

<div class="c-input-group">
  <div class="o-field">
    <input class="c-field" placeholder=".c-input-group">
  </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" placeholder=".c-input-group">
  </div>
</div>
<div class="c-input-group">
  <button class="c-button c-button--brand">Action</button>
  <div class="o-field">
    <input class="c-field" placeholder=".c-input-group">
  </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" placeholder=".c-input-group">
  </div>
  <div class="o-field">
    <input class="c-field" placeholder=".c-input-group">
  </div>
  <div class="o-field">
    <input class="c-field" placeholder=".c-input-group">
  </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" placeholder=".c-input-group">
  </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" placeholder=".c-input-group">
  </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" placeholder=".c-input-group">
  </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

<div class="o-form-element">
  <label class="c-label" for="nickname">Nickname:</label>
  <input id="nickname" placeholder="Nickname" class="c-field">
</div>
<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 role="tooltip" 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.

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">
    <div role="tooltip" class="c-hint">e.g. AB12 3CD</div>
  </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>
  <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>