Inputs

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

Add .field to your text boxes.

Text Input

<input class="c-field" type="text">

<textarea class="c-field"></textarea>

Colours

<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">

Sizes

<input class="c-field c-field--xsmall" type="text">

<input class="c-field c-field--small" type="text">

<input class="c-field c-field--medium" type="text">

<input class="c-field c-field--large" type="text">

<input class="c-field c-field--xlarge" type="text">

<input class="c-field c-field--super" type="text">

Field and Input Groups

If you want to squash a controls together...

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

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

<div class="c-input-group">
  <input class="c-field" type="text">
  <button class="c-button c-button--primary">Action</button>
</div>

<div class="c-input-group">
  <button class="c-button c-button--secondary">Action</button>
  <input class="c-field" type="text">
  <button class="c-button c-button--primary">Action</button>
</div>

<div class="c-input-group">
  <button class="c-button c-button--secondary">Action</button>
  <input class="c-field" type="text">
</div>

<div class="c-input-group c-input-group--rounded">
  <button class="c-button c-button--success">Action</button>
  <input class="c-field" type="text">
  <button class="c-button c-button--error">Action</button>
</div>

<div class="c-input-group c-input-group--rounded-left">
  <button class="c-button c-button--success">Action</button>
  <input class="c-field" type="text">
  <button class="c-button c-button--error">Action</button>
</div>

<div class="c-input-group c-input-group--rounded-right">
  <button class="c-button c-button--success">Action</button>
  <input class="c-field" type="text">
  <button class="c-button c-button--error">Action</button>
</div>

Selects

Add .c-choice to your selects, radios and checkboxes.

<select class="c-choice">
  <option>...</option>
</select>

Colours

<select class="c-choice c-choice--success">
  <option>...</option>
</select>

<select class="c-choice c-choice--error">
  <option>...</option>
</select>

Sizes

<select class="c-choice c-choice--xsmall">
  <option>...</option>
</select>

<select class="c-choice c-choice--small">
  <option>...</option>
</select>

<select class="c-choice c-choice--medium">
  <option>...</option>
</select>

<select class="c-choice c-choice--large">
  <option>...</option>
</select>

<select class="c-choice c-choice--xlarge">
  <option>...</option>
</select>

<select class="c-choice c-choice--super">
  <option>...</option>
</select>

Checkboxes and Radios

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

Tick the box Yes No

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

Colours

.c-choice--success .c-choice--error

<label class="c-choice c-choice--success">
  <input type="checkbox"> <span class="c-text--mono">.c-choice--success</span>
</label>
<label class="c-choice c-choice--error">
  <input type="checkbox"> <span class="c-text--mono">.c-choice--error</span>
</label>

Sizes

<label class="c-choice c-choice--xsmall">
  <input type="checkbox" checked> <span class="c-text--mono">.c-choice--xsmall</span>
</label>
<label class="c-choice c-choice--small">
  <input type="checkbox" checked> <span class="c-text--mono">.c-choice--small</span>
</label>
<label class="c-choice c-choice--medium">
  <input type="checkbox" checked> <span class="c-text--mono">.c-choice--medium</span>
</label>
<label class="c-choice c-choice--large">
  <input type="checkbox" checked> <span class="c-text--mono">.c-choice--large</span>
</label>
<label class="c-choice c-choice--xlarge">
  <input type="checkbox" checked> <span class="c-text--mono">.c-choice--xlarge</span>
</label>
<label class="c-choice c-choice--super">
  <input type="checkbox" checked> <span class="c-text--mono">.c-choice--super</span>
</label>

Fieldsets and Legends

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

A group of controls Option one Option two

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

Disabled fieldset

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

A group of controls Option one Option two

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

Labels and Form Elements

You can either use the for attribute on labels to tie the label to the input or wrap your fields within labels. If you wrap your fields within labels replace the .field class with .label__field element class on your text inputs.

We recommend wrapping your label and inputs within a .c-form-element block, this will supply the block with some vertical padding; ready to be placed within a form.

Nickname:

Real name:

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

Hints

If you want to help your users fill in your forms a placeholder is a useful way of providing help.

Problem with placeholders is that they disappear as soon as you enter text into the input, increasing the user's cognitive load. This is where hints come in, a hint will appear below a text input and stay there as you enter text.

Username:

Make up a username or use your email address

<label class="c-label">
  Username:
  <input class="c-label__field">
  <div class="c-hint a-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 colour of the text.

Forms

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

Please complete the form:

Address line 1:

Postcode: Send me spam

Account login: New user Existing user

<fieldset class="c-fieldset">
  <legend class="c-fieldset__legend">Please complete the form:</legend>
  <div class="c-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 c-form-element">
    Postcode:
    <input class="c-label__field" placeholder="e.g. AB12 3CD">
  </label>
  <label class="c-label c-choice c-form-element">
    <input type="checkbox">
    Send me spam
  </label>
  <fieldset class="c-fieldset c-list c-list--inline c-list--unstyled">
    <legend class="c-fieldset__legend">Account login:</legend>
    <label class="c-label c-choice c-list__item">
      <input type="radio" name="account" checked>
      New user
    </label>
    <label class="c-label c-choice c-list__item">
      <input type="radio" name="account">
      Existing user
    </label>
  </fieldset>
</fieldset>