3 #permalink Forms

Build simple forms with labels, inputs, errors and option groups.

3.1 #permalink Inputs and labels

Add .cf-form-input to <input>, <textarea>, or <select> elements to apply the styles.

Example
You have to provide your name here 
<div class="cf-form-field">
  <label>Name</label>
  <input type="text" value="Contentful!" class="cf-form-input">
  <div class="cf-form-hint">
    You have to provide your name here
  </div>
</div>
<div class="cf-form-field">
  <label>Bio</label>
  <textarea class="cf-form-input"></textarea>
</div>
<div class="cf-form-field">
  <select class="cf-form-input">
    <option value="value">Value</option>
    <option value="more">More</option>
  </select>
</div>

3.3 #permalink Disabled inputs

Disabled styles are applied when the selects [aria-disabled="true"] or :disabled match.

Example 
<div class="cf-form-field">
  <label>Name</label>
  <input type="text" aria-disabled="true" class="cf-form-input" value="Cannot edit :(">
</div>
<div class="cf-form-field">
  <label>Select</label>
  <select disabled class="cf-form-input">
    <option>Value</option>
  </select>
</div>

3.4 #permalink Errors

Error styles are applied when the selects [aria-invalid="true"] or :invalid match.

Example
Something went wrong!
<div class="cf-form-field">
  <label>Name</label>
  <input type="text" aria-invalid="true" class="cf-form-input">
  <div class="cf-field-error">Something went wrong!</div>
</div>
<div class="cf-form-field">
  <label>Select</label>
  <select aria-invalid="true" class="cf-form-input">
    <option>Not the right value</option>
  </select>
</div>

3.5 #permalink Option set

Example

A few options

You also can check both

This is a hint

<form>
  <p>A few options</p>
  <div class="cf-form-option">
    <input type="checkbox" id="option-a">
    <label for="option-a">Check this</label>
  </div>
  <div class="cf-form-option">
    <input type="checkbox" id="option-b">
    <div class="cf-form-label">
      <label for="option-b">Or check that</label>
      <p>You also can check both</p>
      <p class="cf-text-dimmed">This is a hint</p>
    </div>
  </div>
  <div class="cf-form-option">
    <input type="checkbox" id="option-c" disabled>
    <label for="option-c">This option's disabled</label>
  </div>
</form>

3.6 #permalink Horizontal option set

Note: don't use an actual fieldset tag with this class: http://germanforblack.com/post/73295576875/flexbox-for-forms

Example 
<form class="cf-form-horizontal">
  <div class="cf-form-option">
    <input type="checkbox" id="option-d">
    <label for="option-d">Check this</label>
  </div>
  <div class="cf-form-option">
    <input type="checkbox" id="option-e">
    <label for="option-e">Select me</label>
  </div>
  <div class="cf-form-option">
    <input type="checkbox" id="option-f">
    <label for="option-f">Or me</label>
  </div>
</form>