Forms

Overview

Simple example of a form.

<form action="" class="u-w-m400" data-validate>
  <div class="u-m-b" data-input>
    <label class="" for="username-1">Username</label>
    <input class="c-input" type="text" id="username-1" name="username-1" required aria-describedby="username-1-help" data-rule="username" autocomplete="username" placeholder="ex: John_Smith">
    <span class="c-input__hint u-d-block u-m-t-xxs" id="username-1-help">At least 5 characters and 1 number</span>
  </div>
  <div class="u-m-b" data-input>
    <label class="" for="password-1">Password</label>
    <input class="c-input" type="password" id="password-1" name="password-1" required autocomplete="current-password">
  </div>
  <div class="u-m-b" data-input>
    <label class="" for="textarea-1">Tell us about yourself</label>
    <textarea class="c-input" id="textarea-1" name="textarea-1" aria-describedby="textarea-1-help"></textarea>
    <span class="c-input__hint u-d-block u-m-t-xxs" id="textarea-1-help">Limit 250 characters</span>
  </div>
  <div class="u-m-b" data-input>
    <div class="c-input-control u-m-b-sm">
      <input type="checkbox" id="terms-checkbox" name="terms-checkbox" required data-msg="You must accept the terms and conditions" aria-describedby="checkbox-error-region">
      <label class="c-input-control__label" for="terms-checkbox">I agree to the terms and conditions</label>
      <div class="c-input-control__help">
        <a href="http://www.termsandconditions.com" class="styled-link">See terms and conditions</a>
      </div>
    </div>
  </div>
  <button class="c-button" type="submit">Submit</button>
</form>

Inputs

Basic input types include text, email, password, number, search, and date.

Text Input

Disabled Text Input

Readonly Text Input

Readonly Plain Text Input

<div class="u-m-b">
  <label class="" for="input-text">Text Input</label>
  <input class="c-input" type="text" id="input-text" name="input-text" required>
</div>
<div class="u-m-b">
  <label class="" for="input-text-disabled">Disabled Text Input</label>
  <input class="c-input" type="text" id="input-text-disabled" name="input-text-disabled" disabled>
</div>
<div class="u-m-b">
  <label class="" for="input-text-readonly">Readonly Text Input</label>
  <input class="c-input" type="text" id="input-text-readonly" name="input-text-readonly" readonly value="Readonly">
</div>
<div class="u-m-b">
  <label class="" for="input-text-readonly-plain">Readonly Plain Text Input</label>
  <input class="c-input c-input--plain" type="text" id="input-text-readonly-plain" name="input-text-readonly-plaindisabled" readonly value="Readonly Plain Text">
</div>

Radios and Checkboxes

The .c-input-control class applied to a parent will setup custom radios and checkboxes. This parent is also a useful way to organize these components in an accessible manner.

Radio

Use the c-input-control component with input[type="radio"] elements to create custom radios.

I'm a custom radio

<div class="c-input-control">
  <input type="radio" id="simple-radio-1" name="simple-radio">
  <label class="c-input-control__label" for="simple-radio-1">I'm a custom radio</label>
</div>

Radio Groups

Combine c-input-control component with utilities to control layout.

Custom Styling for Radio Groups

There is default styling for fieldsets, but if you prefer to add custom styles, add role="radiogroup" to your parent element and be sure to add a associated label for the element using aria-labelledby.

Do you love making forms?

Yes

No

Do you also enjoy using regular fieldsets?

Yes

No

<div class="u-m-b" role="radiogroup" aria-labelledby="custom-radio-legend">
  <p id="custom-radio-legend">Do you love making forms?</p>
  <div class="c-input-control u-d-inline-block u-m-b-xs u-m-r-sm">
    <input type="radio" id="custom-radio-1" name="custom-radio" required data-msg="Please select an option">
    <label class="c-input-control__label" for="custom-radio-1">Yes</label>
  </div>
  <div class="c-input-control u-d-inline-block">
    <input type="radio" id="custom-radio-2" name="custom-radio" required>
    <label class="c-input-control__label" for="custom-radio-2">No</label>
  </div>
</div>

<fieldset class="u-m-b" role="radiogroup">
  <legend>Do you also enjoy using regular fieldsets?</legend>
  <div class="o-grid">
    <div class="o-grid__item-auto">
      <div class="c-input-control u-m-b-xs">
        <input type="radio" id="custom-radio-3" name="custom-radio-2" required data-msg="Please select an option">
        <label class="c-input-control__label" for="custom-radio-3">Yes</label>
      </div>
    </div>
    <div class="o-grid__item-auto">
      <div class="c-input-control">
        <input type="radio" id="custom-radio-4" name="custom-radio-2" required>
        <label class="c-input-control__label" for="custom-radio-4">No</label>
      </div>
    </div>
  </div>
</fieldset>

Checkbox

Use the c-input-control component with input[type="checkbox"] elements to create custom checkboxes.

I'm a custom checkbox

<div class="c-input-control">
  <input type="checkbox" id="simple-checkbox-1" name="simple-checkbox">
  <label class="c-input-control__label" for="simple-checkbox-1">I'm a custom checkbox</label>
</div>

Radio and Checkbox Help Text

You can supply help text or links with radios and checkboxes.

I need some more explanation

By checking this, you're checking a checkbox.

I need some more explanation

The name radio button was inpsired by old timey radios with buttons which when pressed would pop out the other buttons on the radio.

I hate radios

<div class="c-input-control">
  <input type="checkbox" id="checkbox-help-1" name="checkbox-help-1">
  <label class="c-input-control__label" for="checkbox-help-1">I need some more explanation</label>
  <div class="c-input-control__help">
    By checking this, you're checking a checkbox.
  </div>
</div>

<div class="u-m-t" role="radiogroup">
  <div class="o-grid">
    <div class="o-grid__item-auto u-m-b-sm">
      <div class="c-input-control u-d-inline-block">
        <input type="radio" id="radio-help-1" name="radio-help">
        <label class="c-input-control__label" for="radio-help-1">I need some more explanation</label>
        <div class="c-input-control__help u-w-m400">
          <small>The name radio button was inpsired by old timey radios with buttons which when pressed would pop out the other buttons on the radio.</small>
        </div>
      </div>
    </div>
    <div class="o-grid__item-auto">
      <div class="c-input-control">
        <input type="radio" id="radio-help-2" name="radio-help" required>
        <label class="c-input-control__label" for="radio-help-2">I hate radios</label>
      </div>
    </div>
  </div>
</div>

Selects

The .c-select class creates a unified select display across all browsers.

Basic Form Select Disabled Select Custom NYP Select

<label for="select-1">Basic Form Select</label>
<select name="select-1" id="select-1" class="c-select">
  <option value="">All Regions</option>
  <option value="select-1">Select option 1</option>
  <option value="select-2">Select option 2</option>
  <option value="select-3">Select option 3</option>
  <option value="select-4">Select option 4</option>
</select>

<label for="select-disabled" class="u-m-t-sm">Disabled Select</label>
<select name="select-disabled" id="select-disabled" class="c-select" disabled>
  <option value="">I am disabled</option>
  <option value="select-1">Select option 1</option>
  <option value="select-2">Select option 2</option>
  <option value="select-3">Select option 3</option>
  <option value="select-4">Select option 4</option>
</select>

<!-- Used outside of traditional forms -->
<label for="nyp-select-1" class="u-m-t-sm">Custom NYP Select</label>
<select name="nyp-select-1" id="nyp-select-1" class="c-nyp-select">
  <option value="">All Regions</option>
  <option value="select-1">Select option 1</option>
  <option value="select-2">Select option 2</option>
  <option value="select-3">Select option 3</option>
  <option value="select-4">Select option 4</option>
</select>