CNVS

Forms

Table of Contents

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

<form class="form flush-bottom">
<div class="row">
  <div class="column-small-6">
    <div class="form-group">
      <label>
        First Name
      </label>
      <input type="text" class="form-control" placeholder="">
    </div>
  </div>
  <div class="column-small-6">
    <div class="form-group">
      <label>
        Last Name
      </label>
      <input type="text" class="form-control" placeholder="">
    </div>
  </div>
</div>
…
<div class="button-collection flush-bottom">
  <button type="submit" class="button button-primary">
    Submit
  </button>
</div>
</form>

Form Controls

Inputs

Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus.

<div class="form-group">
  <input type="text" class="form-control" placeholder="Placeholder Text">
</div>

Textarea

Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus.

<div class="form-group">
  <textarea class="form-control" placeholder="Placeholder Text" rows="4"></textarea>
</div>

Checkboxes & Radios

Checkboxes and radios, both staple toggles of the traditional HTML form, share a single class in CNVS, .form-control-toggle, to governs layout and basic styling. Wrap a checkbox or radio in the class .form-control-toggle, preferrably using a <label> for added context and accessibility.

<div class="form-group">
  <label class="form-control-toggle">
    <input type="checkbox">
    First Option
  </label>
  <label class="form-control-toggle">
    <input type="checkbox">
    Second Option
  </label>
  …
</div>

Custom Checkboxes & Radios

Looking to take your checkbox or radio toggle to the next level? Add the class .form-control-toggle-custom to your exisiting .form-control-toggle wrapped checkbox or radio input. The <input> is hidden from view, but still available in the DOM for use in your form. In order to replace the hidden checkbox or radio component with a styled alternate, you must also inject a new element with the class .form-control-toggle-indicator. We recommend a simple <span> for this.

For the checkmark icon, as well as the circle icon for radios, we use base64 embedded SVG icons and adjust the color.

Checkboxes

<label class="form-control-toggle form-control-toggle">
  <input type="checkbox" checked />
  <span class="form-control-toggle-indicator"></span>
  First Option
</label>

For indetermindate checkboxes, one whose state is neither true nor false, you may leverage the :indeterminate pseudo class. However, you must use Javascript magic to manually set this property. Something like this should work: $(element).prop('indeterminate', true).

Radios

<label class="form-control-toggle form-control-toggle">
  <input type="radio" />
  <span class="form-control-toggle-indicator"></span>
  First Option
</label>
…

Disabled

Using the disabled attribute, placed inline on the checkbox or radio HTML element, will not only make the toggle un-clickable, but also adjusts the appearance to reflect it’s inaccessibility.

<label class="form-control-toggle form-control-toggle">
  <input type="checkbox" disabled />
  <span class="form-control-toggle-indicator"></span>
  First Option
</label>

Selects

Default styling for select elements are available, or mirror custom control styling by wrapping any select in .form-control class and add the additional class .form-control-select. For selects of type multiple add the class .form-control-select-multiple.

<div class="form-group">
  <span class="form-control form-control-select">
    <select>
      <option>1</option>
      <option>2</option>
      <option>…</option>
    </select>
  </span>
</div>

<div class="form-group">
  <span class="form-control form-control-select form-control-select-multiple">
    <select multiple>
      <option>1</option>
      <option>2</option>
      <option>…</option>
    </select>
  </span>
</div>

Control Sizes

Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus.

<input type="text" class="form-control form-control-small">

<input type="text" class="form-control">

<input type="text" class="form-control form-control-large">

Control States

Focus

For form controls, we remove the default outline style added by most browsers. On :focus we apply user-defined styling. Similar styling attributes can be defined for the :hover state.

Disabled

Add the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.

Validation

Canvas includes validation states for success and error states for all form elements including .form-control, checkbox, and label. Simply add class .form-group-success or .form-group-danger to any .form-group and all components inside will reflect the appropriate state styling.

<div class="form-group">
  <label>
    Default Input
  </label>
  <input type="text" class="form-control" placeholder="Placeholder">
  <p class="small flush-bottom">
    Example block-level help text here.
  </p>
</div>

<div class="form-group form-group-success">
  <label>
    Success Input
  </label>
  <input type="text" class="form-control" placeholder="Placeholder">
  <p class="form-control-feedback">
    Looks good.
  </p>
  <p class="small flush-bottom">
    Example block-level help text here.
  </p>
</div>

<div class="form-group form-group-danger">
  <label>
    Danger Input
  </label>
  <input type="text" class="form-control" placeholder="Placeholder">
  <p class="form-control-feedback">
    Sorry this ID already exists. Try another.
  </p>
  <p class="small flush-bottom">
    Example block-level help text here.
  </p>
</div>

Inverse Styling

Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus.

<div class="form-group">
  <label class="inverse">
    …
  </label>
  <input type="text" class="form-control form-control-inverse">
  <p class="form-control-feedback inverse">
    …
  </p>
</div>

Form Control Feedback

Apply the class .form-control-feedback to a standard type block to provide contextual feedback like help text or hint text to form controls and form control groups.

<div class="form-group">
  <label>
   Input with help text
  </label>
  <input type="text" class="form-control" placeholder="Placeholder">
  <p class="form-control-feedback">
    Example block-level feedback text here.
  </p>
</div>

Form Control Groups

Align elements alongside or inside .form-control elements by wrapping them in a .form-control-group element. Use the .form-control-group-add-on element to position elements. If you add .form-control to the wrapping .form-control-group the .form-control-group-add-on will live inside the .form-control rather than outside it.

<!-- Input With Add On Before -->

<div class="form-control-group">
  <div class="form-control-group-add-on">
    …
  </div>
  <input type="text" class="form-control" placeholder="Placeholder">
</div>

<!-- Input With Add On After -->

<div class="form-control-group">
  <input type="text" class="form-control" placeholder="Placeholder">
  <div class="form-control-group-add-on">
    …
  </div>
</div>

<!-- Input With Nested Add On Before -->

<div class="form-control-group form-control">
  <span class="form-control-group-add-on form-control-group-add-on-prepend">
    …
  </span>
  <input type="text" class="form-control" placeholder="Placeholder">
</div>

<!-- Input With Nested Add On After -->

<div class="form-control-group form-control">
  <input type="text" class="form-control" placeholder="Placeholder">
  <span class="form-control-group-add-on form-control-group-add-on-append">
    …
  </span>
</div>

<!-- Input With Nested Add On Before &amp; After -->

<div class="form-control-group form-control">
  <span class="form-control-group-add-on form-control-group-add-on-prepend">
    …
  </span>
  <input type="text" class="form-control" placeholder="Placeholder">
  <span class="form-control-group-add-on form-control-group-add-on-append">
    …
  </span>
</div>