6 :
Forms

Under the new styleguide rules, inputs should never share a line within a form, but should always be stacked.

Inputs should be wrapped within the label element to both aid in accessibility and to facilitate default display overrides in the cases of radio and checkbox elements.


6.1 :
Text Input and Textarea (Text Box)

forgot your name?
<label for="this-field" class="input-text">
  <span class="field-name">Field Name <abbr title="required">- required</abbr></span>  
  <input type="text" name="this-field" id="this-field" />  
</label>
<span class="field-help">forgot your name?</span>

6.2 :
Label Feedback

.has-feedback A context class applied if feedback-specific messaging needs to be applied. Needs to be paired with .error, .success or .alert.

.has-feedback.error Error flavor

.has-feedback.alert Alert flavor

.has-feedback.success Success flavor

<label class="has-feedback error input-text">
  <span class="field-name">Label (Error) <abbr title="required">- required</abbr></span>
  <input type="text">
  <div class="feedback-details">A hint about how to fix the error.</div>
</label>

<label class="has-feedback alert input-text">
  <span class="field-name">Label (Alert) <abbr title="required">- required</abbr></span>
  <input type="text">
</label>

<label class="has-feedback success input-text">
  <span class="field-name">Label (Success) <abbr title="required">- required</abbr></span>
  <input type="text">
</label>

6.3 :
Select Input

The select input is wrapped in a parent element with the class .select-menu in order to override browser default styling. This parent element doesn't have have to be a label, but it's recommended.

<div class="has-columns two">
  <div class="column">
    <label for="example">
      <span class="field-name">Label</span>
      <div  class="select-menu">
        <select id="example" name="example">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>
      </div>
    </label>
    <label for="example-error" class="clearfix has-feedback error">
      <span class="field-name">Label</span>
      <div  class="select-menu">
        <select id="example-error" name="example">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>
      </div>
      <div class="feedback-details">Please select an option.</div>
    </label>
  </div>
  <div class="column has-background-secondary">
    <label for="example2">
      <span class="field-name">Label</span>
      <div  class="select-menu">
        <select id="example2" name="example2">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>
      </div>
    </label>
  </div>
</div>

6.4 :
Radio Buttons and Checkboxes

The radio and checkbox browser override styles use a stand-in element to replace the default browser elements.

The radio/checkbox input needs to be positioned out of sight so that focus behavior will still be triggered and so options can still be selected via keyboard navigation.

Also, make sure tabindex="0" is placed on the field-name span. This allows it to receive focus when someone is navigating the page via their keyboard.

All radio and checkbox inputs need to be grouped in fieldsets.

6.4.1 :
Radio Buttons

Please note: If you're going to have inline fields, your tab index values become very important. It seems simply setting tabindex="0" doesn't behave as expected in this scenerio.

Fieldset Title - Basic Setup
Fieldset Title - With Inline Text Input
Fieldset Title - With Inline Select Menu
<fieldset>
  <legend>Fieldset Title - Basic Setup</legend>
  <label role="radio" aria-checked="true" for="radio-41" class="input-radio">
    <input type="radio" name="radio-41" id="radio-41" value="radio value 1"  tabindex="0" />
    <button role="presentation" class="standin"></button>
    <span class="field-name">radio 1</span>
  </label>
  <label role="radio" aria-checked="true" for="radio-42" class="input-radio">
    <input type="radio" name="radio-41" id="radio-42" value="radio value 2" tabindex="0" />
    <button role="presentation" class="standin"></button>
    <span class="field-name">radio 2</span>
  </label>
  <label role="radio" aria-checked="true" for="radio-43" class="input-radio has-text-input">
    <input type="radio" name="radio-41" id="radio-43" value="radio value 3" tabindex="0" />
    <button role="presentation" class="standin"></button>
    <span class="field-name">radio 3</span>
  </label>
</fieldset>

<fieldset>
  <legend>Fieldset Title - With Inline Text Input</legend>
  <label role="radio" aria-checked="true" for="radio-1" class="input-radio">
    <input type="radio" name="radio-1" id="radio-1" value="radio value 1"  tabindex="1" />
    <button role="presentation" class="standin"></button>
    <span class="field-name">radio 1</span>
  </label>
  <label role="radio" aria-checked="true" for="radio-2" class="input-radio">
    <input type="radio" name="radio-1" id="radio-2" value="radio value 2" tabindex="2" />
    <button role="presentation" class="standin"></button>
    <span class="field-name">radio 2</span>
  </label>
  <fieldset class="has-inline-fields">
    <label role="radio" aria-checked="true" for="radio-3" class="input-radio has-text-input">
      <input type="radio" name="radio-1" id="radio-3" value="radio value 3" tabindex="3" />
      <button role="presentation" class="standin"></button>
      <span class="field-name">Has an inline text input</span>
    </label>
    <label class="input-text" for="inline-text">
      $ <input tabindex="4" class="input-text narrow" id="inline-text" type="text" value="" />
    </label>
  </fieldset>
</fieldset>

<fieldset class="has-feedback error">
  <div class="feedback-details">Please select an option below.</div>
  <legend>Fieldset Title - With Inline Select Menu</legend>
  <label role="radio" aria-checked="true" for="radio-2-1" class="input-radio">
    <input type="radio" name="radio-2-1" id="radio-2-1" value="radio value 1" tabindex="5" />
    <button role="presentation" class="standin"></button>
    <span class="field-name">radio 1</span>
  </label>
  <label role="radio" aria-checked="true" for="radio-2-2" class="input-radio">
    <input type="radio" name="radio-2-1" id="radio-2-2" value="radio value 2" tabindex="6" />
    <button role="presentation" class="standin"></button>
    <span class="field-name">radio 2</span>
  </label>
  <fieldset class="has-inline-fields">
    <label role="radio" aria-checked="true" for="radio-2-3" class="input-radio has-text-input">
      <input type="radio" name="radio-2-1" id="radio-2-3" value="radio value 4" tabindex="7" />
      <button role="presentation" class="standin"></button>
      <span class="field-name">Has an inline select menu</span>
    </label>
    <label>
      <div class="select-menu" name="example">
        <select tabindex="8">
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
      </div>
    </label>
  </fieldset>
</fieldset>

6.4.2 :
Checkboxes

Checkbox outside of a fieldset:

Checkbox inside of a fieldset:

Fieldset Title
<h4>Checkbox outside of a fieldset:</h4>
<label class="input-checkbox clearfix" for="checkbox-3" aria-checked="true" role="checkbox" >
    <input type="checkbox" id="checkbox-3" name="checkbox-3" value="checkbox value 3" />
    <button class="standin" tabindex="0" role="presentation"></button>
    <span class="field-name">checkbox 3</span>
</label>
<h4 class="clearfix">Checkbox inside of a fieldset:</h4>
<fieldset>
  <legend>Fieldset Title</legend>
  <label class="input-checkbox" for="checkbox-1" aria-checked="true" role="checkbox" >
    <input type="checkbox" id="checkbox-1" name="checkbox-1" value="checkbox value 1" />
    <button class="standin" tabindex="0" role="presentation"></button>
    <span class="field-name">checkbox 1</span>
  </label>
  <label class="input-checkbox" for="checkbox-2" aria-checked="true" role="checkbox" >
    <input type="checkbox" id="checkbox-2" name="checkbox-2" value="checkbox value 2" />
    <button class="standin" tabindex="0" role="presentation"></button>
    <span class="field-name">checkbox 2</span>
  </label>
</fieldset>